如果你真的不喜欢 FOUT，`font-display: optional` 可能是你的选择

FOUT 的故事非常迷人。 浏览器以前是这样做的：在加载自定义字体时显示“备用”字体，然后在加载完毕后显示文本。 行业有点讨厌它，因为它感觉很生硬，还会导致重新布局。 所以浏览器进行了更改，开始隐藏文本，直到加载自定义字体。 行业对此更讨厌。 没有比完全没有文本的页面更糟糕的了！

字体加载变得非常复杂。 观看 Zach Leatherman 的视频 和我一起讨论这个问题。

现在浏览器说，为什么我们不以 API 和 CSS 的形式将控制权交还给您呢？ 您可以使用 font-display 属性（规范）来控制行为。

似乎 font-display: swap; 吸引了最多的注意力。 这是有充分理由的。 这是以最有力方式将 FOUT 带回来的值。 浏览器根本不会等待未加载的字体。 它会立即在堆栈中最匹配且可用的字体中显示文本，然后在加载匹配度更高的字体时，它会“切换”到该字体。

@font-face {
  font-family: Merriweather;
  src: url(/path/to/fonts/Merriweather.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Merriweather,   /* Use this if it's immediately available, or swap to it if it gets downloaded within a few seconds */
               Georgia,        /* Use this if Merriweather isn't downloaded yet. */
               serif;          /* Bottom of the stack. System doesn't have Georgia. */
               
}

人们希望他们的 FOUT 回来，他们也得到了它。 当然，前提是在他们的浏览器中支持 font-display。 目前我们正在查看 Chrome 60+ 作为唯一支持它的浏览器（这意味着它很快就会在 Blink 家族的其他成员中出现）。 它已经出现在 Firefox 的旗帜后面，所以这是一个好兆头。

但是，如果您不喜欢 FOUT 呢？

一个选项是 font-display: fallback;。 它有点奇怪，因为这与默认行为（auto 或 block）非常相似。 不同之处在于，它有一个非常短的等待时间（“字体阻塞时间”），约为 100 毫秒，如果在超短时间内字体未准备就绪，则不会显示任何内容，而是显示备用字体。 然后字体有大约 3 秒的时间进行加载，它将切换，否则它永远不会切换。

这似乎非常合理。 您在那里阻止的是后期切换，这在它最尴尬的时候发生。 但是，仍然存在 FOUT 风险。

如果您更希望在网络字体不可用时，只显示备用字体，并且 *从不* 切换到它，即使在它下载之后也是如此。 你可以！ 这就是 font-display: optional; 的作用。 它仍然提供大约 100 毫秒的字体阻塞时间（让字体有机会在第一页查看时显示），但在此之后，将显示备用字体，并且不会切换。 很有可能，字体最终还是下载了，并且在下一页查看时它将被缓存并使用。

我对这个问题持开放态度。 我能理解 font-display: swap; 如何成为最佳内容可访问性的理想选择。 我不太喜欢 FOUT，所以我可以理解 font-display: optional; 的吸引力。 我也能理解 font-display: fallback; 如何在两者之间取得平衡。

除了浏览器支持对于使用此功能至关重要之外，还有网络字体提供商对其的支持问题。 例如，在使用 Google Fonts 的默认字体加载方法时，您没有机会使用 font-display，因为 @font-face 块来自 Google 托管的样式表。 关于此问题有一个 公开讨论。 但是，您可以使用自己的 @font-face 块来使用 Google Fonts。 一定要查看 Zach Leatherman 的指南。