共同对抗 FOIT 和 FOUT | CSS-Tricks

使用网络字体时可能会出现两种问题：不可见文本闪烁 (FOIT) 和未设置文本闪烁 (FOUT) … 如果要比较它们，FOUT 当然算是较小的问题

如果您想对抗 FOIT，最简单的工具是 font-display CSS 属性。我喜欢 optional 值，因为我通常不喜欢字体切换的外观。

如果您想同时对抗这两种问题，一种选择是预加载字体

<link rel="preload" href="/fonts/awesome-l.woff2" as="font" />

但是…

预加载是您的朋友，但不是您最好的朋友… 过度预加载会显着降低性能，因为预加载会阻止初始渲染。

就像 CSS 一样。

在与 Scott Jehl 的谈话中，他指出“预加载会阻止初始渲染”并不完全正确，并且他整理了一个测试用例。<link rel="preload" ...> 资源本身不会阻止渲染。

即使是大型网站也没怎么处理字体加载的性能。Roel Nieskens

我预计主要新闻网站会非常注重它们使用的字体，并确保一切经过高度优化。事实证明，一个简单的星期天下午的破解就可以节省大量数据：我们可以轻松地节省大约 200KB

字体是网络性能的很大一部分，所以让我们改进它！这是 Zach Leatherman 在 Performance.now() 大会上的演讲

故事的一部分是我们可能需要依赖 JavaScript 来完成我们需要做的事情。Divya 再次说道

网络字体主要面向 CSS。因此，使用 JavaScript 解决 CSS 问题可能会让人感觉像是错误的做法，尤其是 JavaScript 会导致页面重量不断增加。

但有时您只需要这样做才能完成需要做的事情。也许您想自己处理页面可见性？这是 Divya 的演示代码段

const font = new fontFace("My Awesome Font", "url(/fonts/my-awesome-font.woff2)" format('woff2')")
  font.load().then (() => {
    document.fonts.add(font);
    document.body.style.fontFamily = "My Awesome Font, serif";

    // we can also control visibility of the page based on a font loading //
    var content = document.getElementById("content");
    content.style.visibility = "visible";
    })

但还有很多其他原因。 Zach 已经记录了这些原因

因为，随着您加载字体，每个字体都可能导致重绘，并且您希望将它们分组。
因为用户表明他们想要使用更少的数据或减少运动。
因为您希望对缓慢的网络友好。
因为您正在使用无法处理 font-display 的第三方。