Đảm Bảo Văn Bản Vẫn Hiển Thị Trong Khi Tải Phông Chữ Web

Vài lời của người dịch: font tùy chỉnh- khi áp dụng một cách khéo léo, để giúp đỡ tăng tính thẩm mỹ, đậm chất ngầu của trang, và đó là 1 trong yếu tố đặc trưng để thu hút người dùng, họ không bắt buộc cực đoan thải trừ nó chỉ để tốc độ tăng thêm. Mặc dù nhiên, mặt khác, văn bạn dạng cũng cần nỗ lực hiển thị càng nhanh càng xuất sắc trên trang, bài viết này đang hướng dẫn bọn họ cân bằng cả 2 yếu tố này. OK, let’s go!

Các phông thường là đa số file lớn, cùng mất thời gian để mua về. Một số trình chú tâm ẩn văn bản cho cho đến lúc font tải chấm dứt thì new hiển thị, đây là nguyên nhân gây nên tình trạng Flash of invisible text (FOIT / hoàn toàn có thể dịch là: Nháy văn bản ẩn hoặc Văn bạn dạng ẩn xuất hiện thêm đột ngột).


Bạn đang xem: Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web

Mục lục


Cách Lighthouse soát sổ lỗi hiển thị font?

Lighthouse đính thêm cờ chú ý cho bất kể URL fonts nào hoàn toàn có thể là nguyên nhân gây ra hiện tượng lạ flash invisible text (nháy văn phiên bản ẩn), ví dụ:


*

Làm cụ nào nhằm tránh lỗi văn phiên bản ẩn?

Cách dễ nhất để tránh hiện tượng kỳ lạ văn phiên bản ẩn trong khoảng thời gian font tùy chỉnh (custom font) thiết lập về đó là trong thời điểm tạm thời hiển thị font có sẵn của hệ thống (system font- hay còn được gọi là font an toàn, font bao gồm sẵn trong đồ vật của tín đồ dùng). Bằng cách bao có CSS font-display: swap trong style

Xem thêm:

font-face, bạn có thể tránh được hiện tượng kỳ lạ FOIT trong đa số các trình thông qua hiện đại, thế 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 và hướng dẫn cho giải pháp font hiển thị như thế nào. swap nói cho trình cẩn thận rằng văn bản sử dụng font tùy chỉnh thiết lập phải hiển thị ngay lập tức, bằng cách sử dụng font khối hệ thống nào đấy. Rồi một lúc font tùy chỉnh cấu hình đã chuẩn bị sẵn sàng (tức là tải xong), nó sẽ sửa chữa cho fonts hệ thống.

Google fonts

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

Trình chu đáo hỗ trợ

Điều đáng kể là không phải tất cả các trình duyệt to đều cung ứng font-display: swap, chính vì thế bạn cần bài viết liên quan một chút nhằm sửa vụ việc văn bản ẩn (có thể tôi vẫn dịch bài xích này sau).

Ví dụ demo trong thực tế

Tôi (người dịch) tất cả tạo 2 trang chạy thử để bạn dễ bình chọn và quan sát:

Kiểm tra bởi Google PageSpeed Insights mang lại từng trang trên các bạn sẽ thấy công dụng tương ứng như sau:

Trang dính FOIT:


*

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

*

Trang quá qua bài bác kiểm tra FOIT không trở nên gắn cảnh báo này, điểm số tốc độ của nó cũng xuất sắc hơn:


*

Khi trang không xẩy ra FOIT, nó sẽ hiển thị font có sẵn trên khối hệ thống trước, rồi mới hiển thị font thiết lập cấu hình sau (khi nó trả tất cài font tùy chỉnh cấu hình về):