font-display是一个新的 CSS 属性，允许开发人员根据字体加载速度是否足够快来控制字体的呈现方式。有几篇关于它的文章:
他们都没有提到图标字体。该规范确实有一个示例提到了 block 值的图标字体，但对我来说使用它没有意义:
'block'
Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
如果我对规范的理解正确，这意味着如果图标在“短阻塞期”后未加载，将使用后备字体，导致随机字母出现在它们的位置。
如果我使用 optional 值，随机字母将永远不会出现，但如果图标在“极小的 block 周期”内未加载，则它们也不会出现。
似乎没有提供无交换的无限 block 周期的值(因此它会显示不可见的文本，直到且除非字体加载)。这背后有什么原因吗？有解决方法吗？
最佳答案
font-display: block;
正如您评论的那样，block 仍然有一个swap 周期；所以在加载之前它仍然会被渲染。
Wanna hear something quite unfortunate? We already mentioned
font-display: block;. Wouldn't you think it, uh, well, blocked the rendering of text until the custom font loads? It doesn't. It's still got a swap period. It would be the perfect thing for something like icon fonts where the icon (probably) has no meaning unless the custom font loads. Alas, there is no font-display solution for that.
考虑替代方案:
我也去过。如果有机会，您可能需要为图标切换到 SVG。它比字体图标有一些优势:SVG is better at pretty much everything than icon fonts .
甚至 Zach Leatherman，网络字体专家，在他非常著名的 Comprehensive Guide to Font Loading Strategies 上也对此发表了看法。 .
This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.
关于css - 更正图标字体的字体显示值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49461308/