css - 图标字体：它们是如何工作的？

Question

我知道图标字体只是字体，您可以通过调用它们的类名来获取图标，但是图标字体是如何工作的？

我尝试检查 Chrome 中加载的相关图标字体资源，以查看图标字体如何显示图标（与一般字体相比），但我无法弄清楚这是如何发生的。

即使有大量可用的图标字体，我也未能找到有关如何完成“图标字体技术”的资源。还有大量资源展示了如何 集成图标字体，但似乎没有人分享或写下这是如何完成的！

Answer 1

字形图标是图像而不是字体。所有的图标都在一个 sprite 图像中（也可以作为单独的图像使用），并且它们被添加到元素作为定位backround-images：

实际的字体图标（例如FontAwesome）确实涉及下载特定字体并使用该content属性，例如：

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

由于旧版浏览器不支持content该属性，因此它们也使用了images。

这是一个完全原始的 FontAwesome 用作字体的示例，将（ - 你可能看不到这个！）变成救护车：http: //jsfiddle.net/GWqcF/2

Answer 2

如果您的问题是 CSS 类如何插入特定字符（将呈现为特殊字体的图标），请查看FontAwesome 的源代码：

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

因此，使用 CSS 内容指令插入字符（它来自 Unicode 的一个特殊的私有保留区域，不会弄乱其他阅读器）。

Answer 3

webfont 图标是如何工作的？

Web 字体图标通过使用 CSS 使用 content 属性将特定字形注入 HTML 来工作。然后它使用@font-face加载一个 dingbat webfont 来设置注入字形的样式。结果是注入的字形成为所需的图标。

首先，您需要一个带有所需图标的 Web 字体文件，这些图标可以为特定ASCII字符定义，也可以(A, B, C, !, @, #, etc.)在 Unicode 字体的专用区域中定义，这些是字体中的空格，不会被特定字符使用Unicode 编码字体。

阅读更多，如何在Responsive Webfont Icons创建 webfont 图标。