Tôi đã đọc các bài đăng về điều này và vẫn không thể tìm thấy câu trả lời. Có ai đã tìm ra cách tải trước phông chữ để ngừng nhấp nháy/chậm trễ không?Tải trước @ Font-Face Fonts để ngừng Firefox Flicker/Delay
Chúc mừng. Erik
Chiến đấu với fout trong Firefox: Firefox khởi động lại - render văn bản SAU kiện window.load. Vì vậy, những gì tôi đã làm là ẩn nội dung như Paul Irish, nhưng SAU KHI window.load Tôi vẫn chờ 200 millisec (để cung cấp cho FF thời gian cho rendering thực), và sau đó hiển thị trang.
Trang web của tôi có rất nhiều hình ảnh, vì vậy để tăng tốc độ này, trước tiên tôi gửi toàn bộ trang mà không có nội dung, sau đó nhận nội dung bằng cuộc gọi ajax. Đó là rất nhiều công việc để đáp ứng FF, nhưng kết quả là tốt.
Đây là biến thể paul irish của tôi, lưu ý tôi sử dụng tiêu cực text-indent thay cho tầm nhìn để phục vụ người truy cập ít nhất bố trí nhanh hơn:
<script>
(function(){
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
// s.textContent = 'body{visibility:hidden}';
s.textContent = 'body{text-indent:-9999px}';
e.firstChild.appendChild(s);
function f()
{
var ffrendertime = setTimeout (function(){s.parentNode && s.parentNode.removeChild(s)} , 200);
}
addEventListener('load',f,false);
setTimeout(f,2000);
}
})();
</script>
Đây là thực sự hữu ích, tôi đã thay đổi nó để 600 thay vì 200 khi không tải phông chữ đủ nhanh. EDIT: Sau đó thay đổi nó trở lại sau khi tôi ngừng sử dụng api phông chữ của Google - quá chậm. –
Điểm ffrendertime là gì –
Sẽ không tốt hơn nếu chỉ ẩn văn bản với lớp không hoạt động trên thẻ html và kiểu nội tuyến trong tiêu đề ẩn tất cả các nút con của .wf-không hoạt động chứa phần tử văn bản thay vì thực hiện một cách giải quyết khác thường để tải văn bản sau khi tải DOM. Suy nghĩ điều này sẽ tốt hơn cho SEO hơn là tải nội dung vật lý qua AJAX. – cchamberlain
@Erik,
Hiện đã có rất nhiều cuộc thảo luận về vấn đề này mà Paul Irish gọi fout (flash của văn bản unstyled). Có rất nhiều cách để hạn chế điều này bằng cách
1 Đưa CSS ở phía trên cùng của trang trước khi bất kỳ kịch bản sẽ gắn vào
2 Giảm thiểu kích thước của tập tin phông chữ
3 trình duyệt Caching với tương lai xa hết hạn tiêu đề
4 Gziping css của bạn và file font (WOFF không thể gzip)
Paul Ailen có một bài viết tuyệt vời về điều này: Fighting the @font-face FOUT
Steve Souders cũng có một bài viết tuyệt vời về hiệu suất trang web cao blog của mình: @font-face and performance
Dưới đây là một giải pháp phát hiện khi các web-phông chữ có nạp mà không cần phải sử dụng tính giờ ở tất cả
trùng lặp: http://stackoverflow.com/questions/1330825/preloading-font-face-fonts – user123444555621