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

Vài lời của người dịch: font tùy chỉnh- khi sử dụng một cách khéo léo, sẽ giúp tăng tính thẩm mỹ, cá tính của trang, và đó là một yếu tố quan trọng để thu hút người dùng, chúng ta không nên cực đoan loại bỏ nó chỉ để tốc độ tăng thêm. Tuy nhiên, mặt khác, văn bản cũng cần cố gắng hiển thị càng sớm càng tốt trên trang, bài viết này sẽ hướng dẫn chúng ta cân bằng cả 2 yếu tố này. OK, let’s go!

Các font thường là những file lớn, và 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 thì mới hiển thị, đâ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), ví dụ:

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 khoảng thời gian 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- hay còn gọi là font an toàn, font có sẵn trong thiết bị của người dùng). Bằng cách bao gồm CSS 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, cụ thể:

@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 (tức là tải xong), nó sẽ thay thế cho font hệ thống.


Google fonts

Trên Google fonts bạn cầ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)

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

    • Tôi dự tính cập nhật các bài viết khác kèm nhiều demo để nó dễ hiểu hơn.Cảm ơn lời khen của bạn.

      Reply
    • Icon tôi chưa tìm hiểu nên hiện tại không trả lời bạn được. Có lẽ không phải thiết bị nào cũng lưu trữ các icon nên vấn để này khả năng sẽ phức tạp hơn bạn à. Xin lỗi bạn vì trả lời muộn nhé.

      Reply
  1. Trước mình dùng font Roboto, mình thử tắt Google font đi thì điểm tăng lên nhưng font chữ trong trang web thì mảnh hơn một chút so với trước đó, xem font-weight vẫn là 400, kích thước và màu sắc vẫn như thế. Vậy là sao bạn nhỉ?

    Reply
    • Có thể là cùng Roboto nhưng thiết kế của Google fonts với cả trên thiết bị của mình nó có đôi chút khác nhau nên bị vậy bạn à. Bạn có thể điều chỉnh bằng cách tăng độ đậm lên xem sao (thông qua CSS).

      Reply

Leave a Comment