CSSfont-display quyết định browser xử lý ra sao trong lúc font tuỳ chỉnh chưa tải xong.
css
@font-face {
font-family: 'Be Vietnam Pro';
src: url('/fonts/bvp.woff2') format('woff2');
font-display: swap;
size-adjust: 100%; /* căn kích thước với font dự phòng, giảm nhảy layout */
}| Giá trị | Giai đoạn chờ | Kết quả |
|---|---|---|
block | ~3s ẩn chữ | FOIT — trắng chữ, tệ nhất cho cảm nhận tốc độ |
swap | 0s | hiện font dự phòng ngay, đổi khi font về — FOUT, có thể gây CLS |
fallback | ~100ms | thoả hiệp: chờ rất ngắn, sau đó giữ font dự phòng nếu về muộn |
optional | ~100ms | dùng font tuỳ chỉnh chỉ khi đã có sẵn, ngược lại bỏ hẳn lần này |
auto | tuỳ browser | thường giống block |
Chọn thế nào:
- Ưu tiên nhìn thấy chữ sớm → swap, và bù CLS bằng size-adjust / ascent-override.
- Ưu tiên không nhảy layout (điểm CLS quan trọng) → optional.
Lưu ý: đừng dùng swap mà không căn font dự phòng — chữ đổi font làm layout xô lệch, CLS tăng và Lighthouse trừ điểm. Cặp size-adjust + font-family dự phòng cùng metric là cách xử lý gốc.
Ghi chú: next/font tự làm phần này (tự host, tự sinh fallback đã căn metric) — nên trong dự án Next.js hiếm khi phải đụng tay.