預加載@字體臉字體停止Firefox閃爍/延遲

Question

我一直在閱讀關於此的帖子，仍然無法找到答案。有沒有人想出瞭如何預加載字體來停止閃爍/延遲？

乾杯。 埃裏克

Answer 1

在Firefox搏擊FOUT： Firefox啓動重 - 渲染文本之後window.load事件。 因此，我所做的就是隱藏像Paul Irish這樣的內容，但是在window.load之後，我仍然等待200毫秒（爲真實渲染提供FF時間），然後顯示頁面。

我的網站有很多圖片，所以爲了加快速度，我首先發送頁面沒有內容，然後用ajax調用獲取內容。 這是很多工作來滿足FF，但結果是好的。

這是我保羅愛爾蘭的變種，請注意我用的知名度代替負文本縮進，以服務遊客至少佈局速度快：

<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> 

Answer 2

@Erik，

已經有關於這個問題，其中保羅愛爾蘭呼籲FOUT（無樣式的文本的閃光）的討論很多。有許多方法由

1的任何腳本之前，在頁面的最頂端把CSS來限制這種標籤

2最小化的字體文件

3瀏覽器緩存與遙遠的未來的規模Expires頭

4 Gziping你的CSS和字體文件（WOFF不能用gzip壓縮）

保羅愛爾蘭大約有一個很好的文章：Fighting the @font-face FOUT

史蒂夫Souders的也有他的高性能網站博客一個偉大的文章：@font-face and performance

Answer 3

下面是當網頁字體有檢測解決方案而完全不必

http://smnh.me/web-font-loading-detection-without-timers/