使用 Web 字体实现更好、更清晰的 UI 图标的指南

您是否将 PNG 和 GIF 等位图图像用于您网站上的图标？如果是这样，您可能已经注意到它们的大小可能相当大，尤其是当它们详细或数量众多时。这不仅会增加文件大小，还会减慢您的网站速度，因为它需要对每个图标发出多个 HTTP 请求。

虽然 CSS Sprite 提供了一种解决方法，但它们并不能完全解决文件过大的问题。位图图标的另一个缺点是它们缺乏灵活性和可伸缩性。放大这些图标或在高分辨率屏幕（如 Apple 的 Retina 显示屏）上查看它们通常会导致外观模糊。

如果这些问题听起来很熟悉，那么是时候考虑改用图标字体以获得更高效和可扩展的解决方案了。

探索图标字体的优点

图标字体本质上是打包到 Web 字体中的图标集合，可以使用该规则轻松将其合并到网站中。正如 Chris 在 CSS-Tricks 上强调的那样，与传统图像图标相比，图标字体带来了几个关键优势：@font-face

• 由于基于矢量，图标字体与分辨率无关，可确保在各种屏幕分辨率（包括 Retina 显示屏等高分辨率屏幕）上清晰显示。
• 图标字体是可扩展的，允许调整大小而不会降低质量或清晰度。
• 由于它们是字体，您可以使用 CSS 轻松修改它们的颜色、透明度、文本阴影和大小。
• 它们可以使用 CSS3 进行动画处理，从而为您的网站添加动态元素。
• for 图标字体的使用受到广泛支持，即使在 Internet Explorer 4（带有 .eot）等较旧的浏览器中也是如此。@font-face
• 使用图标字体可以减少 HTTP 请求并减少整体文件大小。

实施 @font 面规则

如前所述，图标字体使用 CSS 中的规则嵌入到网页中。此规则允许我们定义一个新的 .让我们以 ‘Web Symbols’ 字体为例：@font-facefont-family

 @font-face{ 
 font-family: 'WebSymbolsRegular';
 src: url('fonts/websymbols-regular-webfont.eot');
 src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
 url('fonts/websymbols-regular-webfont.woff') format('woff'),
 url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
 url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
 }

在 HTML 文档中，要显示图标，我们只需使用与每个图标对应的字符即可。我们可以通过添加唯一类来定位特定元素，而不是全局应用全局，如下所示：font-family

 <ul class="icon-font">
	 <li>h</li>
	 <li>i</li>
	 <li>j</li>
	 <li>A</li>
	 <li>I</li>
 </ul>

然后，回到 CSS 中，我们为添加的类定义这个 new：font-family

.icon-font {
    font-family: WebSymbolsRegular;
    font-size: 12pt;
}

将图标与伪元素集成

伪元素提供了另一种创造性的图标合并方式。将以下 HTML 标记视为我们的起点：

	 <ul class="icon-font pseudo">
	 <li>Reply</li>
	 <li>Reply All</li>
	 <li>Forward</li>
	 <li>Attachment</li>
	 <li>Image</li>
 </ul>

在 CSS 中，我们可以通过使用伪元素在每个项目之前显示图标来增强此列表：

ul.icon-font.pseudo li:before {
    font-family: WebSymbolsRegular;
    margin-right: 5px;
}

ul.icon-font.pseudo li:nth-child(1):before {
    content: "h";
}

ul.icon-font.pseudo li:nth-child(2):before {
    content: "i";
}

ul.icon-font.pseudo li:nth-child(3):before {
    content: "j";
}

ul.icon-font.pseudo li:nth-child(4):before {
    content: "A";
}

ul.icon-font.pseudo li:nth-child(5):before {
    content: "I";
}

私有使用 Unicode

有一种情况是，它们不是将图标嵌入到标准字符（A、B、C、D 等）中，而是嵌入到 Unicode 专用使用区域中，以避免字符之间发生任何冲突。FontAwesome 等工具使用此方法，其中字符代码包含在样式表中，如下所示：

.icon-glass:before {
    content: "\f0c6";
}
 

要将图标直接插入 HTML 中，代码不会呈现，因为它不是有效的 HTML 编码字符。

HTML 需要数字引用标记来呈现特殊字符。它要求在十六进制数（表示字符）前面加上符号。例如，在 HTML 中变为 。在 FontAwesome 中，以下代码显示一个回形针图标，如下所示：
&#xf0c6

最后的想法

虽然这种做法排除了添加此类高度详细效果的可能性，但它提供了一种灵活、可扩展、支持 Retina 的解决方案，并且文件大小最小。如果您的设计可以承受没有高细节，那么这种图标提供方法非常有益。