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

Question

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

• 使用 font-display 控制字体性能 - Google Developers
• font-display 为大众

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

'堵塞'

给字体一个短的阻塞周期（在大多数情况下推荐 3s）和一个无限的交换周期。

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

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

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

Answer 1

font-display: block;

正如你所评论的，block还有一段swap时间；所以它仍然被渲染，直到它被加载。

引用 Chris Coyier 的话：

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

考虑替代方案：

我也去过那里。如果有机会，您可能需要将图标切换到SVG。它比 font-icons 有一些优势：SVG 在几乎所有方面都比 icon fonts 更好。

甚至网络字体专家 Zach Leatherman 在他非常著名的字体加载策略综合指南中也对此发表了看法。

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