html - 图标字体：字体与字体类中的连字

Question

在图标字体中使用字体连字是一种趋势。图标名称作为连字存储在字体文件中。

优点是：不需要为每个图标创建css类，html代码更短。

所以你可以写

<i class="icon">arrow-left</i>

代替

<i class="fa fa-arrow-left"></i>

两者哪个版本的浏览器性能更好？（在第一个示例中，CSS 文件不包含附加类，在第二个示例中，字体没有任何连字）。

可能比两者都有更好的性能：

<i class="icon">&#61023;</i>

没有图标类+没有连字，但是当更多的图标添加到字体中时，字符代码不能改变，你必须知道所有的字符代码。您也可以直接插入字符，但编辑器可能不会显示它。

Answer 1

首先，我真正不喜欢的是“i”标签如何以某种方式用作图标的缩写，它用于惯用文本。

我的首选方式：

<span class="icon">icon-ligature</span>

它明确地缩短了您必须包含的 css，因为您通常会为每个图标设置一个类。

出于性能原因，我不会更改方法，但是从字体维护者的角度来看，如果您需要一个额外的字体图标，您只需使用正确的连字将其添加到字体中，您就可以完成，您需要使用类方法添加一个类到 css 中的 unicode 映射 + 修补字体。