Hey hey `font-display`

大家知道 font-display 吗？它非常棒。它是一个 CSS 属性，可以在 @font-face 块中使用，以控制字体加载时的视觉效果。字体加载实际上非常复杂。 这是 Zach Leatherman 的一篇指南，证明了这一点，其中包括超过 10 种字体加载策略，包括涉及字体子集的关键内联 CSS 以及稍后通过 JavaScript 加载其余字体的策略。这可不是什么轻松的事。

不过，使用 font-display 就像在公园里散步一样。它只是一行 CSS 代码。它并没有解决 Zach 演示的更高级的方案中的所有问题，但它可以通过一行代码实现很多功能。现在值得一提的是，支持 最近有了很大提升。它现在已在 Firefox 58+、Chrome 60+、Safari 11.1+、iOS 11.3+ 和 Android 64+ 上的 Chrome 中可用。相当不错。

您从中得到了什么？控制 FOUT 和 FOIT 的能力，这两种情况在字体加载方面都比较糟糕。我们在这里有一些关于它的文章

• 面向大众的 font-display 由 Jeremy Wagner 撰写
• 如果您真的不喜欢 FOUT，font-display: optional 可能适合您 由我撰写

提醒

FOUT = 未设置文本的闪现
FOIT = 不可视文本的闪现

两者都不理想。在理想情况下，我们的自定义字体会立即显示。但由于这不是一个实际的可能性，我们需要根据自己的优先级进行选择。

关于它的最佳资源是 Monica Dinculescu 的解释页面

我会这样总结这些值的选项

• 如果您不介意 FOUT，那么最好使用 font-display: swap;，它会相当快地显示备用字体，并在加载自定义字体时进行替换。
• 如果您不介意 FOIT，那么最好使用 font-display: block;，它与当前浏览器的行为非常相似，在等待自定义字体时不显示任何内容，但最终会回退。
• 如果您只想在自定义字体立即可用时显示，则需要 font-display: optional;。它仍然会在后台加载，并且可能在下一次页面加载时可用。

对于一行 CSS 代码来说，这些都是相当不错的选项。但请记住，如果您正在运行一个包含自定义字体的主要文本密集型网站，Zach 的指南 可以帮助您做更多的事情。

我几乎可以断言：每个 @font-face 块都应该有一个 font-display 属性。唯一的例外是您正在执行一些特殊操作，并且出于某种原因希望使用浏览器的默认行为。

想听听一件非常不幸的事情吗？我们已经提到了 font-display: block;。您是否认为它会在自定义字体加载之前阻止文本渲染？并非如此。它仍然有一个交换周期。它将非常适合图标字体，因为除非加载自定义字体，否则图标（可能）没有任何意义。唉，没有 font-display 解决方案可以解决这个问题。

而且，天啊，如果 Google Fonts 允许我们使用它，那不是很好吗？