font-display https://www.w3.org/TR/css-fonts-4/#font-display-desc是一个新的 CSS 属性，允许开发人员根据字体加载速度是否足够快来控制字体的呈现方式。已经有几篇文章介绍了：
- 使用 font-display 控制字体性能 - Google Developers https://developers.google.com/web/updates/2016/02/font-display
- font-display为大众 https://css-tricks.com/font-display-masses/
他们都没有提到图标字体。该规范确实有一个示例提到了图标字体block值，但对我来说使用它没有意义：
'block'
使字体变短区块期 https://www.w3.org/TR/css-fonts-4/#font-block-period（大多数情况下建议 3s）和无限交换期 https://www.w3.org/TR/css-fonts-4/#font-swap-period.
如果我正确理解规范，这意味着如果图标在“短块周期”后尚未加载，则将使用后备字体，导致随机字母出现在其位置。
如果我使用optional值，随机字母永远不会出现，但如果图标没有在“极小块周期”内加载，则图标也不会出现。
似乎没有一个值可以在没有交换的情况下给出无限的块周期（因此它会显示不可见的文本，直到字体加载）。这背后有原因吗？有解决方法吗？
font-display: block;
正如你评论的那样，block仍然有一个swap时期;所以在加载之前它仍然会被渲染。
引用克里斯·科伊尔的话 https://css-tricks.com/hey-hey-font-display/:
想听听一些非常不幸的事情吗？我们已经提到过font-display: block;。您不认为它会阻止文本渲染，直到加载自定义字体吗？事实并非如此。还有一个交换期。对于图标字体之类的东西来说，这将是完美的东西，除非加载自定义字体，否则图标（可能）没有任何意义。唉，没有字体显示解决方案.
考虑替代方案：
我也去过那里。如果有机会，您可能需要切换到SVG对于图标。与字体图标相比，它有一些优点：SVG 几乎在所有方面都比图标字体更好 https://css-tricks.com/icon-fonts-vs-svg/.
就连网络字体专家扎克·莱瑟曼 (Zach Leatherman) 在他著名的文章中也对此发表了自己的看法。字体加载策略综合指南 https://www.zachleat.com/web/comprehensive-webfonts/.
本指南不适用于具有不同加载优先级和用例的字体图标。此外，SVG 可能是更好的长期选择。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
