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

Question

我一直在阅读有关此事的帖子,但仍无法找到答案.有没有人想出如何预加载字体以停止闪烁/延迟？

干杯.埃里克

Answer 1

@Erik,

关于这个问题已经有很多讨论,保罗爱尔兰称之为FOUT(无格式文本的闪光).有很多方法可以限制它

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

2最小化字体文件的大小

3远程未来的浏览器缓存会使标头过期

4 gziping你的CSS和字体文件(woff不能被gzip压缩)

Paul Irish有一篇很棒的文章:与@ font-face FOUT战斗

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

Answer 2

在Firefox中对抗FOUT:Firefox开始重新渲染文本AFTER window.load事件.所以我所做的就是像Paul Irish那样隐藏内容,但AFTER 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>