Css 如果没有每个图标一个类，mono social icon如何工作？

我想知道如何显示正确的图标

对于其他字体图标集，您需要添加一个类名，在

：之后加载一个utf-8字符

然而，单一社交图标的情况并非如此。只需将图标添加为文本，即可显示正确的图标。这是用最小的CSS完成的

@font-face {
    font-family: 'Mono Social Icons Font';
    src: url('MonoSocialIconsFont-1.10.eot');
    src: url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
         url('MonoSocialIconsFont-1.10.woff') format('woff'),
         url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
         url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
    src: url('MonoSocialIconsFont-1.10.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.symbol {
    font-family: 'Mono Social Icons Font';
}

这样我就可以用这个字体了

<span class='symbol'>facebook</span>

facebook

我完全搞不懂单一社交图标是如何在引擎盖下工作的

有人知道这是如何实现的吗？
欢迎使用OpenType字体：字体是非常复杂的应用程序，几十年来一直如此，几乎与您想到字体时可能想到的完全不同（例如，“每个字母一张图片”）。您看到的是基本的替换功能

它的工作原理与好的字体用连字“fi”替换“f”+“i”以及类似于进行全字替换的字体的工作原理相同：文本引擎按照字体的说明来设置字符串“whatever”的样式，并看到字体包含替换规则。它参考该表（简化，因为每个脚本和语言可以有不同的规则，一种字体可以支持数百种规则），并看到需要应用的：

{w,h,a,t,e,v,e,r} => glyphid:1234

因此，当它看到完整的字符串“whatever”时，它会用内部glyph位置1234处的单个glyph替换序列，而不是渲染字符串“whatever”，在这种字体中，该glyph“是”图标（轮廓只是轮廓，但你，人类，将其识别为图标，这才是重要的），并进行渲染

可以在此处找到更详细的解释：