当前位置：文江博客话题详情

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

发布于 2024-09-12 11:09:42 字数 27 浏览 5 评论 0原文

有谁知道如何预加载字体来阻止闪烁/延迟？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水中月 2024-09-19 11:09:42

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

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

2 最小化字体文件的大小

3 浏览器缓存在未来会过期标头

4 对 CSS 和字体文件进行 Gzip 压缩（WOFF 无法被压缩）

Paul Irish 有一篇关于此的很棒的文章：与@font-战斗face FOUT

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

回复收藏 0 原文

起风了 2024-09-19 11:09:42

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

Fighting the FOUT in Firefox :
Firefox starts re - rendering the text AFTER window.load event.
So what I did is hide the content like Paul Irish does, but AFTER window.load I still wait 200 millisec (to give FF time for the real rendering), and then show the page.

My site has a lot of images, so to speed this up, I first send the page allmost without content, and then get the content with an ajax call.
That's a lot of work to satisfie FF, but the results are good.

This is my paul irish variant, note I use negative text-indent in stead of visibility to serve the visitor at least the layout faster:

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

回复收藏 0 原文

~没有更多了~