Vài lời của fan dịch: fonts tùy chỉnh- khi thực hiện một cách khéo léo, sẽ giúp đỡ tăng tính thẩm mỹ, đậm cá tính của trang, với đó là một trong yếu tố quan trọng để thu hút fan dùng, chúng ta không đề xuất cực đoan loại bỏ nó chỉ để vận tốc tăng thêm. Tuy nhiên, khía cạnh khác, văn phiên bản cũng cần nỗ lực hiển thị càng nhanh càng xuất sắc trên trang, nội dung bài viết này sẽ hướng dẫn bọn họ cân bằng cả hai yếu tố này. OK, let’s go!

Các fonts thường là phần lớn file lớn, cùng mất thời hạn để mua về. Một vài trình chú tâm ẩn văn phiên bản cho cho đến lúc font tải dứt thì mới hiển thị, đó 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 phiên bản ẩn hoặc Văn phiên bản ẩn xuất hiện độ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 kiểm soát lỗi hiển thị font?

Lighthouse đính cờ cảnh báo cho bất cứ URL fonts nào rất 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àm thế nào nhằm tránh lỗi văn bạn dạng ẩn?

Cách dễ dàng nhất để tránh hiện tượng văn bản ẩn trong khoảng thời hạn font tùy chỉnh (custom font) cài đặt về đó là trong thời điểm tạm thời hiển thị font gồm sẵn của khối hệ thống (system font- hay nói một cách khác là font an toàn, font bao gồm sẵn trong thứ của fan dùng). Bằng cách bao tất cả CSS font-display: swap vào style

Xem thêm:

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

Trình coi sóc hỗ trợ

Điều nên để ý là ko phải toàn bộ các trình duyệt lớn đề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 dạng ẩn (có thể tôi đang dịch bài bác này sau).

Ví dụ chạy thử trong thực tế

Tôi (người dịch) bao gồm tạo 2 trang kiểm tra để bạn dễ bình chọn và quan liêu sát:

Kiểm tra bằng Google Pagephotoworld.com.vn Insights mang đến từng trang trên bạn sẽ thấy hiệu quả tương ứng như sau:

Trang dính FOIT:


*

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

*

Trang thừa qua bài kiểm tra FOIT không trở nên gắn chú ý này, điểm số tốc độ của nó cũng giỏi hơn:


*

Khi trang không biến thành FOIT, nó vẫn hiển thị font bao gồm sẵn trên khối hệ thống trước, rồi bắt đầu hiển thị font thiết lập sau (khi nó hoàn tất download font thiết lập cấu hình về):