FOUT、FOIT、FOFT

还记得 FOUT 吗？ 当通过 @font-face 使用自定义字体时，浏览器过去会显示字体堆栈中的回退字体，直到自定义字体加载完成。 这会产生“未设置样式文本的闪烁”，这令人不安，并可能导致布局发生变化。 我们致力于解决此问题，例如，在字体准备好之前使文本不可见。

几年前，浏览器开始改变其处理方式。 它们开始检测文本是否设置为尚未加载的自定义字体，并在字体加载完成（或经过 X 秒）之前将其设置为不可见。 这就是 FOIT：“不可见文本的闪烁”。 如果字体资源失败或需要很长时间，则对于那些正确关注渲染时间性能的人来说，这 X 秒的时间过长。 最糟糕的是，这种行为可能导致内容永久不可见。

如今，我们正在通过各种方式努力解决 FOIT 问题。 在 使用字体事件加速字体加载 中，Jonathan Suh 建议使用 库 来检测自定义字体是否已加载，然后才更改文档上的类名以将文本设置为该字体。 这使得行为类似于 FOUT——以稍微令人不快的视觉变化为代价加快可读内容的显示速度。

Zach Leatherman 也一直在写很多关于这方面的内容。 在 使用字体加载事件改进 @font-face 中，他还建议在设置类以设置字体类型之前等待字体加载完成。 他还介绍了触发字体下载所需的步骤（这并不像 @font-face 声明那样简单）。 Scott Jehl 在 使用字体事件重新审视字体加载 中证实了这一点，其中包括关于 cookie 和缓存的一些内容。

Zach 的 最新技巧 涉及 FOFT：“伪文本的闪烁”。 这里的想法是只等待自定义字体的罗马变体加载，并立即将文本设置为该变体。 您强制浏览器在需要时创建“伪粗体”和“伪斜体”，这些文本将在下载相应的真实版本后被替换。

Vitaly Friedman 在 Smashing Magazine 上的文章 中写到了他们的方法，他们实际上使用 localStorage 来缓存字体。 在第一次页面加载时，它最终会像 FOUT 一样，而在后续加载时则会像（快速）FOIT 一样。

我只是觉得我们每隔一段时间就会在这方面来回切换很有趣。 浏览器以一种方式运行，我们将其欺骗成以另一种方式运行。 它会切换到那种方式，然后我们又将其欺骗成以旧的方式运行。