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

Posted 2023-03-15

【中文标题】图标字体：它们是如何工作的？

【英文标题】：Icon Fonts: How do they work?

【发布时间】：2013-03-08 08:13:37

【问题描述】：

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

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

即使有大量icon fonts available，我也未能找到有关如何完成这种“图标字体技术”的资源。还有大量资源展示了图标字体如何integrated，但似乎没有人分享或撰写关于如何做到这一点！

【参考方案1】：

Glyphicons 是images 并且不是字体。所有图标都在一个 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 属性isn't supported，这些也使用images。

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

【讨论】：

FontAwesome 图标是字体。我什至在我的回答中提到了 FontAwesome，并继续说他们如何处理不支持将图标添加到页面的 CSS 方法的浏览器。

图标是字体的字符。举个粗略的例子：字母“Z”可以被设计成一个手提箱，保存为字体，然后在网站上使用。

这是一个使用完全原始 FontAwesome 的示例，将  变成救护车：jsfiddle.net/GWqcF/2

@VivekChandra 是的，没错！ :-) 图标字体与任何其他字体一样，只是字符的样式看起来像图标。 FontAwesome 使用characters reserved for "private use" 的范围。

我的浏览器只加载小盒子，例如F0F9 在里面。为什么？

【参考方案2】：

如果您的问题是 CSS 类如何插入特定字符（将呈现为特殊字体的图标），请查看source for 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 的一个特殊的私有保留区域，不会弄乱其他阅读器）。

【讨论】：

斜线 f 是什么意思？

f 不是其中的一部分，它只是十六进制数字 15。反斜杠开始十六进制代码点的转义序列。 CSS 中的 \f004 就像 html 中的 。

【参考方案3】：

网络字体图标如何工作？

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

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

在Responsive Webfont Icons阅读更多，如何创建网络字体图标。