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

【问题标题】：Preload @Font-Face Fonts to stop Firefox Flicker/Delay预加载 @Font-Face 字体以停止 Firefox 闪烁/延迟
【发布时间】：2021-01-04 04:22:43
【问题描述】：

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

【问题讨论】：

重复：stackoverflow.com/questions/1330825/preloading-font-face-fonts

标签： fonts embedded-fonts

【解决方案1】：

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

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

2 最小化字体文件的大小

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

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

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

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

【讨论】：

【解决方案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>

【讨论】：

这真的很有用，我把它改成了 600 而不是 200，因为字体加载速度不够快。编辑：后来在我停止使用 Google 字体 api 后将其改回 - 太慢了。
在 html 标记上隐藏带有 wf-inactive 类的文本和在标题中隐藏所有包含文本元素的 .wf-inactive 后代节点的内联样式不是更好吗而不是做一个古怪的解决方法，在 DOM 加载后加载文本。认为这对于 SEO 来说比通过 AJAX 加载物理内容更好。