css - 如果没有每个图标的类，单声道社交图标如何工作？

Question

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

其他与其他字体图标集你需要添加一个类名，它在:after中加载一个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>

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

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

Answer 1

欢迎使用 OpenType 字体:字体是极其复杂的应用程序，已经存在了几十年，与您在想到字体时可能想到的几乎完全不同(例如，“每个字母一张图片”)。您看到的是基本的替换功能。

它的工作原理与优质字体将“f”+“i”替换为连字“fi”以及类似http://sansbullshitsans.com 的字体的方式相同。进行全字替换:文本引擎遵循字体关于如何设置字符串“whatever”样式的说明，并看到字体包含 GSUB table。用于替换规则。它查阅该表(已简化，因为每种脚本和语言可以有不同的规则，并且一种字体可以支持数百种)，并看到 ligature substitution rule需要应用:

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

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

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