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

Correct font-display value for icon fonts

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

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

'block'

Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.

如果我对规范的理解正确,这意味着如果图标在“短阻塞期”后仍未加载,将使用后备字体,导致随机字母出现在它们的位置。

如果我使用 optional 值,随机字母将永远不会出现,但如果图标在“极小的块周期”内未加载,则它们也不会出现。

似乎没有提供无交换的无限块周期的值(因此它会显示不可见的文本,直到并且除非字体加载)。这背后有什么原因吗?有解决方法吗?

font-display: block;

如您所说,block 仍有 swap 期;所以它在加载之前仍然呈现。

Quoting Chris Coyier:

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.