正确的图标字体字体显示值 [英] Correct font-display value for icon fonts

问题描述

font-display 是新的CSS属性，允许开发人员根据字体加载速度是否足够快来控制字体的呈现方式.上面有几篇文章:

font-display is a new CSS property that allows developers to control how fonts are rendered depending on if they load quickly enough. There's been a few articles on it:

• 使用字体显示控制字体性能-Google Developers
• font-display面向大众

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

他们都没有提到图标字体.规范中确实有一个示例，其中提到了block值的图标字体，但对我而言，使用该字体没有任何意义:

None of them mention icon fonts. The specification does have an example that mentions icon fonts for the block value, but to me it doesn't make sense to use that:

阻止"

赋予字体较短的阻止时间段(在大多数情况下，建议使用3s)和无限的交换期.

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

如果我正确理解规范，则意味着如果在短块时间"之后未加载图标，则会使用后备字体，从而导致随机字母出现在其位置.

If I understand the specification correctly, this means if the icons haven't loaded after the "short block period", the fallback font will be used, resulting in random letters appearing in their place.

如果我使用optional值，则随机字母将永远不会出现，但如果图标没有在极小的块时间段"中加载，图标也将不会出现.

If I use the optional value, the random letters will never appear but neither will the icons if they haven't loaded in the "extremely small block period".

在没有交换的情况下，给出无穷大的块周期似乎没有值(因此，除非字体加载，否则它将显示不可见的文本).这背后有原因吗?有没有解决方法?

There doesn't appear to be a value for giving an infinite block period without swap (so it would show invisible text until and unless the font loads). Is there a reason behind this and is there a workaround?

推荐答案

font-display: block;

正如您所评论的，block仍然有一个swap句点；因此它仍然会渲染，直到加载完毕.

As you commented, block still has a swap period; so it's still rendered until it's loaded.

引用克里斯·科耶尔(Chris Coyier):

想听到很不幸的事吗?我们已经提到了font-display: block;.您是否会认为，嗯，直到自定义字体加载后才阻止了文本的呈现?没有.它仍然有一个交换期.对于像图标字体这样的东西(除非加载了自定义字体)，图标(可能)没有意义，这将是完美的选择. las，没有字体显示解决方案.

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 以获得图标.与font-icons相比，它具有一些优点: SVG几乎可以胜任除了图标字体之外的所有内容 .

I've also been there. If you have the chance, you might need to switch to SVG for icons. It has a few advantages over font-icons: SVG is better at pretty much everything than icon fonts.

即使是网络字体专家Zach Leatherman，也对他非常有名的> 字体加载策略综合指南" .

Even Zach Leatherman, web fonts expert, has opinions about it on his very famous Comprehensive Guide to Font Loading Strategies.

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

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.

这篇关于正确的图标字体字体显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！