Có cách nào thực sự để tránh tải chậm của phông chữ?Tránh tải chậm khuôn mặt phông chữ
Có một blogpost từ Paul Irish about this FOUT (flash của văn bản chưa được đặt trước). Từ năm 2009.
Có tiến bộ nào trong 3 năm qua không?
Bạn đang đưa ra hai vấn đề riêng biệt. Một sự chậm trễ trong việc tải xuống các tệp phông chữ thực tế về cơ bản là không thể tránh khỏi, mặc dù bạn có thể giúp nó bằng cách không bao gồm bất kỳ thứ gì bạn không thực sự cần, để giảm thiểu kích thước tệp tổng thể. Tùy thuộc vào dịch vụ/phương pháp bạn đang sử dụng, điều này có thể kéo theo việc giảm bộ ký tự (/ ngôn ngữ) bạn bao gồm, cũng như trọng lượng và kiểu.
Khi nhấp nháy văn bản chưa được đặt trước, điều đó là không thể tránh khỏi, một phần do vấn đề thời gian tải xuống ở trên. Nhưng một khi bạn đã giảm được nhiều nhất có thể, bạn nên triển khai trình tải phông để kiểm soát tốt hơn phần này. Đây là TypeKit's (open-sourced) implementation và brief explanatory blog post. Ví dụ ở dưới cụ thể địa chỉ FOUT; bạn có thể khá nhiều chỉ cần thả nó vào mã của riêng bạn.
Dưới đây là một số information from FontDeck về cách sử dụng trình tải của Google với dịch vụ của họ, điều này cũng sẽ dẫn đến việc sử dụng cùng một dịch vụ WebFont của Google.
Bất kỳ dịch vụ nào khác, bạn sẽ phải bắt đầu thực hiện nghiên cứu của riêng mình, nhưng đó là những khái niệm chung. Với những công cụ này, bạn có thể sử dụng một số quy tắc kịch bản và CSS để ẩn văn bản bị ảnh hưởng cho đến khi phông chữ sẵn sàng để trình bày, trong số một số cách sử dụng khác. Nó không hoàn toàn ý tưởng, nhưng ít nhất là ngăn chặn FOUT. Sau khi đã qua thời gian ban đầu, bộ nhớ cache của trình duyệt sẽ chiếm ưu thế và làm cho nó trở nên lớn.
'try {Typekit.load();} catch (e) {}' từ việc triển khai TypeKit khá nhiều người nói rằng tất cả - tài liệu sẽ không hiển thị cho đến khi tập lệnh chạy như vậy, nếu bạn không nhớ khiến người dùng phải đợi thêm một lượng thời gian (hy vọng được tính bằng mili giây) thì điều này sẽ hoạt động ... nếu bạn quan tâm đến việc tạo trang càng nhanh càng tốt, điều này không hoạt động. (... và nếu người dùng không gắn bó đủ lâu để xem trang web của bạn * hoàn thành * đang tải, nó thực sự không quan trọng trang web của bạn trông như thế nào :) – danlefree
Điều đáng nói là phông chữ nhúng dữ liệu-uri là một tùy chọn. Tránh các yêu cầu http bổ sung. – jason
A) bộ nhớ cache phông chữ bằng cách thiết lập Cache-Control và Content-Type chính xác:
Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)
B) Tránh https cho Vary Header. Chỉ đặt Accet-Encoding. Các Vary: https breaks IE font loading.
Vary:Accept-Encoding
https://github.com/typekit/webfontloader
C) A và B nên làm việc một cách hoàn hảo sau khi yêu cầu đầu tiên, khi trình duyệt đã có nạp font. Nếu điều này không đủ, hãy thử Web Font Loader.
Khi bạn tham khảo thông tin bạn đã gặp phải, thường là một ý tưởng hay để liên kết với nó. –
Đây là bài đăng mới về chủ đề này mà tôi thấy hữu ích: https://michael.stapelberg.de/Artikel/font-loading –