Đả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 xong, gây ra hiện tượng văn bản ẩn xuất hiện chớp nhoáng (FOIT).

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

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

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

Cách tránh hiển thị văn bản không hiển thị

API font-display cho biết cách hiển thị phông chữ khi được sử 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 Google Fonts:

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

Cách tránh các thay đổi về 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 một văn bản không có kiểu (FOUT). Điều này giúp cải thiện FCP&LCP bằng cách hiển thị nội dung sớm hơn, nhưng cả FOIT và FOUT đều có tác động tương tự đến CLS khi phông chữ tuỳ chỉnh thay thế phông chữ hệ thống tạm thời.

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 sử dụng tính năng tải trước kết hợp với font-display: optional. Tuy nhiên, việc sử dụng quá nhiều tính nă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 việc tải phông chữ trước không gây ra bất kỳ sự hồi quy về hiệu suất nào.

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 của bạn.

Magento

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

Tài nguyên