预加载@Font-Face字体以停止Firefox Flicker/Delay

Question

有没有人想出了如何预加载字体来停止闪烁/延迟？

Answer 1

在火狐中对抗FOUT :火狐在window.load事件后开始重新渲染文本。所以我所做的就是像保罗·爱尔兰那样隐藏内容，但在window.load之后，我仍然等待200毫秒(以便让FF有时间进行真正的渲染)，然后显示页面。

我的站点有很多图片，所以为了加快速度，我首先发送几乎没有内容的页面，然后通过ajax调用获取内容。要满足FF需要做很多工作，但结果很好。

这是我的paul爱尔兰变体，注意我使用了负文本缩进而不是可见性，以便至少在布局上更快地为访问者服务：

    <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

有很多关于这个问题的讨论，保罗·爱尔兰称之为FOUT (flash of unstyled text)。有许多方法可以通过以下方式限制这一点

1将CSS放在页面的最顶部，放在任何脚本标记之前

2最小化字体文件的大小

3使用远未来的expires标头进行浏览器缓存

4压缩你的CSS和字体文件(WOFF不能被gzipped压缩)

保罗·爱尔兰有一篇很棒的文章：Fighting the @font-face FOUT

Steve Souders在他的高性能网站博客上也有一篇很棒的文章：@font-face and performance