Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web

Phông chữ thường là các tệp lớn có thời gian tải chậm. Một số trình duyệt ẩn văn bản cho đến khi phông chữ tải, gây ra chớp văn bản không hiển thị (FOIT).

Cách quy trình kiểm tra hiển thị phông chữ Lighthouse không thành công

Lighthouse sẽ gắn cờ mọi URL phông chữ có thể nhấp nháy văn bản không hiển thị:

Ảnh chụp màn hình Lighthouse. Đảm bảo văn bản vẫn hiển thị trong quá trình kiểm tra tải phông chữ web

Cách tránh hiển thị văn bản ẩn

API font-display cho biết cách hiển thị phông chữ khi dùng bên trong kiểu font-face. Các giá trị font-display sau đây sẽ yêu cầu trình duyệt sử dụng phông chữ hệ thống nếu phông chữ tuỳ chỉnh chưa sẵn sàng:

  • swap
  • optional
  • fallback

Ví dụ về CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Ví dụ về Google Fonts

Thêm tham số &display=swap/&display=optional/&display=fallback vào cuối URL của Google Fonts:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Cách tránh thay đổi bố cục do phông chữ bị trì hoãn

Việc tạm thời hiển thị phông chữ hệ thống sẽ thay thế FOIT bằng ánh sáng flash về văn bản chưa định kiểu (FOUT). Điều này giúp cải thiện FCP và LCP bằng cách hiển thị nội dung sớm hơn, nhưng cả FOIT và FOUT sẽ tác động như nhau đến CLS khi phông chữ tuỳ chỉnh thay thế phông chữ tạm thời của hệ thống.

Bạn có thể giảm thiểu tác động của việc tải phông chữ đối với CLS bằng cách tải trước cùng với font-display: optional. Tuy nhiên, việc lạm dụng tải trước có thể ảnh hưởng tiêu cực đến các chỉ số tải. Bạn nên thực hiện thử nghiệm A/B để đảm bảo rằng phông chữ tải trước không dẫn đến sự hồi quy về hiệu suất.

Hướng dẫn dành riêng cho ngăn xếp

Drupal

Chỉ định @font-display khi xác định phông chữ tuỳ chỉnh trong giao diện.

Magento

Chỉ định @font-display khi xác định phông chữ tuỳ chỉnh.

Tài nguyên