如果每个图标没有 class，单声道社交图标如何工作？

Question

我想知道 Mono Social Icons 如何显示正确的图标。

Other with other with other font icon sets you need to add a class name, which loads an utf-8 character in :after.

然而，单一社交图标并非如此。您只需将图标添加为文本即可显示正确的图标。这是最小的 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>

我对 Mono Social Icons 在幕后的工作方式完全不解。

有人知道这是如何实现的吗？

Answer 1

欢迎使用 OpenType 字体：字体是极其复杂的应用程序，已经存在了几十年，与您在想到字体时可能想到的几乎完全不同（例如 "one picture for each letter"）。您看到的是基本的替换功能。

它的工作原理与好字体用连字“fi”替换"f" + "i"的方式相同，需要应用的字体如http://sansbullshitsans.com do full-word substitutions: the text engine follows the font's instructions on how to style the string "whatever", and sees that the font contains a GSUB table for substitution rules. It consults that table (simplified, because each script and language can have different rules, and one font can support hundreds of those), and sees a ligature substitution rule：

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

因此，当它看到完整的字符串 "whatever" 时，它不会渲染字符串 "whatever"，而是将序列替换为在内部字形位置 1234 处找到的单个字形，在此字体 "is" 一个图标（轮廓只是轮廓，但你，人类，将它识别为一个图标，这才是最重要的）并渲染它。

更详细的解释可以在这里找到：http://pomax.github.io/CFF-glyphlet-fonts/

如果每个图标没有 class，单声道社交图标如何工作？

How can mono social icon work without a class per icon?

css

fonts

icons