Cách sửa lỗi dịch chuyển bố cục font

Chuyện gì đang xảy ra?

Có hai hiện tượng phổ biến. Với nhấp nháy chữ vô hình (FOIT), chữ bị trống cho đến khi font được tải xong. Với nhấp nháy chữ chưa định kiểu (FOUT), một font dự phòng hiện ra trước rồi được thay thế. Nếu hai font có kích thước khác nhau, các dòng sẽ ngắt lại và nội dung bị dịch chuyển. Sự dịch chuyển này được tính vào Cumulative Layout Shift (CLS), một trong các Core Web Vitals của Google.

Chọn giá trị font-display

• swap hiển thị chữ ngay lập tức và thay bằng font chính khi font đã sẵn sàng. Đây là lựa chọn phổ biến, nhưng có thể gây dịch chuyển.
• optional chỉ dùng font của bạn nếu nó tải rất nhanh. Cách này tránh việc thay font muộn, phù hợp với chữ nội dung trên các trang ưu tiên tốc độ.
• fallback nằm giữa hai giá trị trên, với thời gian chờ ngắn và khoảng thời gian giới hạn để thay font.

Khớp font dự phòng của bạn

Đây là cách sửa hiệu quả nhất. Bạn tạo một font dự phòng dùng font hệ thống, được điều chỉnh kích thước để chiếm gần cùng diện tích với webfont. Khi thay font, rất ít nội dung bị dịch chuyển:

@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}

Bạn không cần tự tính các con số này. Trong Webfont Generator, mở tab CSS, chọn Matched fallback font, và công cụ sẽ đo font của bạn rồi viết sẵn quy tắc.

Những cách khác giúp ích

• Preload font chính để font được tải trước lần vẽ đầu tiên khi có thể.
• Giữ file font nhỏ gọn, như đã hướng dẫn trong bài làm webfont tải nhanh hơn.
• Tránh nhiều nguồn font khác nhau. Phục vụ font từ chính tên miền của bạn sẽ bỏ được một kết nối phụ.

Kiểm tra điểm số

Chạy Page Speed Test và xem chỉ số CLS. Điểm tốt là 0.1 trở xuống. Để tự quan sát hiện tượng thay font, hãy giới hạn tốc độ mạng trong công cụ dành cho nhà phát triển của trình duyệt rồi tải lại trang.