fonts - 预加载@Font-Face 字体以停止 Firefox 闪烁/延迟

Question

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

Answer 1

关于这个问题已经有很多讨论，Paul Irish 称之为 FOUT（无样式文本的闪烁）。有很多方法可以限制这一点

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

2 最小化字体文件的大小

3 具有远期过期标头的浏览器缓存

4 压缩你的 CSS 和字体文件（WOFF 不能压缩）

Paul Irish 有一篇很棒的文章：Fighting the @font-face FOUT

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

Answer 2

在 Firefox 中对抗 FOUT：Firefox 在 window.load 事件之后开始重新渲染文本。所以我所做的是像 Paul Irish 那样隐藏内容，但是在 window.load 之后我仍然等待 200 毫秒（给 FF 时间进行真正的渲染），然后显示页面。

我的网站有很多图片，所以为了加快速度，我首先发送几乎没有内容的页面，然后通过 ajax 调用获取内容。满足FF的工作量很大，但结果还是不错的。

这是我的 paul irish 变体，注意我使用负文本缩进而不是可见性来为访问者提供服务，至少更快地布局：

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