Question

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

干杯。埃里克

Answer 1

<强> @Erik，

有很多关于这个问题的讨论，保罗爱尔兰称之为FOUT（无格式文本的闪光）。

有很多方法可以限制这个

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

2最小化字体文件的大小

3远程未来的浏览器缓存过期标题

4 gziping你的css和字体文件（woff不能被gzip压缩）

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

Steve Souders也在他的高性能网站博客上发表了一篇很棒的文章：@font-face and 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>

Answer 3

这是一个检测网络字体何时加载而无需使用计时器的解决方案

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

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

3 个答案: