更正图标字体的字体显示值

Question

font-display 是一个新的 CSS 属性，它允许开发人员根据加载速度是否足够快来控制字体的呈现方式。有几篇关于它的文章：

• Controlling Font Performance with font-display - Google Developers
• font-display for the Masses

他们都没有提到图标字体。该规范确实有一个示例提到了block 值的图标字体，但对我来说使用它没有意义：

'阻止'

为字体提供一个短的block period（大多数情况下建议使用3s）和一个无限的swap period。

如果我正确理解规范，这意味着如果图标在“短块期”之后没有加载，将使用备用字体，导致随机字母出现在它们的位置。

如果我使用optional 值，随机字母将永远不会出现，但图标也不会出现在“极小块期”中。

似乎没有一个值可以在没有交换的情况下提供无限块周期（因此它会显示不可见的文本，直到并且除非字体加载）。这背后有什么原因吗？有解决方法吗？

Answer 1

font-display: block;

正如您所评论的，block 仍然有一个 swap 句点；所以它仍然会在加载之前呈现。

Quoting Chris Coyier:

想听到一些非常不幸的事情吗？我们已经提到了font-display: block;。您不认为它会阻止文本的呈现，直到自定义字体加载？它没有。它仍然有一个交换期。对于图标字体之类的东西，除非加载自定义字体，否则图标（可能）没有意义，这将是完美的选择。唉，没有字体显示解决方案。

考虑替代方案：

我也去过。如果有机会，您可能需要为图标切换到 SVG。它比字体图标有一些优势：SVG is better at pretty much everything than icon fonts。

就连网络字体专家 Zach Leatherman 也对他非常著名的Comprehensive Guide to Font Loading Strategies 发表了自己的看法。

本指南不适用于具有不同加载优先级和用例的字体图标。此外，SVG 可能是一个更好的长期选择。