Lỗi không ai thấy
Các gói font phổ biến chia font thành nhiều tệp theo vùng mã Unicode: latin, latin-ext, vietnamese. Trình duyệt chỉ tải tệp có ký tự trang cần. Nghe rất tối ưu, cho tới khi trang có tiếng Việt.
Các chữ đ, ơ, ư, ă, ĩ, ũ nằm ở vùng U+0100 đến U+01B0. Vùng này thuộc cả tệp vietnamese lẫn tệp latin-ext. Chỉ cần một chữ "đ", trình duyệt tải luôn tệp latin-ext, có thể nặng hơn 100 KB, chỉ để vẽ vài ký tự.
Tự cắt font: chỉ giữ thứ cần
Lấy font gốc, giữ đúng Latin cơ bản, các chữ cái và dấu tiếng Việt, cùng vài ký hiệu thường dùng. Với font biến thiên độ đậm, cắt luôn trục độ đậm về khoảng thật sự dùng.
U="U+0020-007E,U+00A0-00FF,U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303,U+0309,U+0323,U+1EA0-1EF9,U+2013-2014,U+2018-201E,U+2026,U+20AB"
fonttools varLib.instancer Unbounded-VF.ttf wght=700:800 -o Unbounded-700-800.ttf
pyftsubset Unbounded-700-800.ttf --unicodes="$U" --flavor=woff2 \
--layout-features='kern,mark,mkmk,ccmp,locl' --no-hinting --output-file=unbounded-vn.woff2Bốn tệp font của joker.vn cộng lại 72 KB, thay vì khoảng 280 KB nếu để gói font tự chia.
Chống nhảy bố cục khi đổi font
Khi font web tải xong, chữ đổi từ font hệ thống sang font thật. Nếu hai font khác độ rộng, cả trang giật một cái. Cách sửa: tạo một font dự phòng từ Arial, rồi chỉnh kích thước và khoảng dòng để nó chiếm đúng chỗ như font thật.
@font-face {
font-family: "BVP Fallback";
src: local("Arial"), local("Liberation Sans");
size-adjust: 107.4%;
ascent-override: 93.1%;
descent-override: 24.7%;
line-gap-override: 0%;
}Kết quả
- Font tải về giảm gần 4 lần
- Chỉ số nhảy bố cục (CLS) về 0
- Hai font quan trọng nhất được tải trước, chữ hiện đúng font ngay lần đầu trên mạng tốt