Đảm bảo văn bản vẫn hiển thị trong khi font tùy chỉnh tải về

Font thường là những file lớn, mất thời gian để tải về. Một số trình duyệt ẩn văn bản cho đến khi font tải xong, đây là nguyên nhân gây ra tình trạng Flash of invisible text (FOIT / có thể dịch là: Nháy văn bản ẩn hoặc Văn bản ẩn xuất hiện đột ngột).

Cách Lighthouse kiểm tra lỗi hiển thị font?

Lighthouse gắn cờ cảnh báo cho bất cứ URL font nào có thể là nguyên nhân gây ra hiện tượng flash invisible text (nháy văn bản ẩn):

lỗi hiển thị font

Làm thế nào để tránh lỗi văn bản ẩn?

Cách dễ nhất để tránh hiện tượng văn bản ẩn trong khi font tùy chỉnh (custom font) tải về đó là tạm thời hiển thị font có sẵn của hệ thống (system font). Bằng cách bao gồm font-display: swap trong style @font-face, bạn có thể tránh được hiện tượng FOIT trong hầu hết các trình duyệt hiện đại:

@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;
}

API font-display chỉ định cho cách font hiển thị như thế nào. swap nói cho trình duyệt rằng văn bản sử dụng font tùy chỉnh phải hiển thị ngay lập tức, bằng cách sử dụng font hệ thống nào đấy. Rồi một khi font tùy chỉnh đã sẵn sàng, nó sẽ thay thế cho font hệ thống.

Google fonts

Trên Google fonts bạn thêm tham số &display=swap vào cuối URL để nó có được tính năng swap, ví dụ:

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

Trình duyệt hỗ trợ

Điều đáng nói là không phải tất cả các trình duyệt lớn đều hỗ trợ font-display: swap, vì thế bạn cần tìm hiểu thêm một chút để sửa vấn đề văn bản ẩn (có thể tôi sẽ dịch bài này sau).

Ví dụ demo trong thực tế

Tôi (người dịch) có tạo 2 trang demo để bạn dễ kiểm tra và quan sát:

Kiểm tra bằng Google PageSpeed Insights cho từng trang trên bạn sẽ thấy kết quả tương ứng như sau:

Trang dính FOIT:

trang bị gắn cờ cảnh báo FOIT

Điểm số tốc độ:

điểm số tốc độ thấp hơn

Trang vượt qua bài kiểm tra FOIT không bị gắn cảnh báo này, điểm số tốc độ của nó cũng tốt hơn:

điểm số tốc độ cao hơn

Khi trang không bị FOIT, nó sẽ hiển thị font có sẵn trên hệ thống trước, rồi mới hiển thị font tùy chỉnh sau (khi nó hoàn tất tải font tùy chỉnh về):

(Dịch từ Ensure text remains visible during webfont load, trang web[.]dev)

2 bình luận về “Đảm bảo văn bản vẫn hiển thị trong khi font tùy chỉnh tải về”

Viết một bình luận