字体内的图标对网站有用吗？

Question

我想创建仅包含图标的特殊字体。每个字母都有不同的图标。 我想把这个字体嵌入到css中。 并像这样使用 如果我需要一些图标：

<a class="icon">f</a>

和包含以下内容的CSS

<link href='http://fonts.mysite.com/css?family=MyFontWithIcons' rel='stylesheet' type='text/css'>

：

@media screen {
@font-face {
  font-family: 'MyFontWithIcons';
  font-style: normal;
  font-weight: normal;
  src: local('MyFontWithIcons'), url('http://fonts.mysite.com/font?MyFontWithIcons') format('truetype');
}
}

并显示带有图标类的图标：

.icon {font-family: 'MyFontWithIcons'; }

并且字母“f”将被替换为位于f字母位置的字体内的图标。 css 与字体一起使用，并将 f 替换为字体内的图标。 我认为这是好主意还是坏主意？字体文件的大小比许多图像图标小。 而且通过这种技术，我可以使用不同的字体颜色=不同的图标颜色？尺寸等。 那么，这是好主意还是坏主意？

Answer 1

使用图标的自定义字体的问题是，如果出现以下情况，您将没有备份计划：

• 您的用户的浏览器太旧，无法支持 @font-face
• 用户代理不是您的传统浏览器（例如盲人屏幕阅读器、搜索引擎、HTML 到文本转换器等）
• 用户将包含“图标”的文本复制粘贴到丢弃丰富格式信息或不包含相关字体的内容中。
• 用户代理永远不会支持@font-face（例如，用于 Unix/Linux 的 Lynx、Links2 和 ELinks 等文本 Web 浏览器）
• 用户位于公司代理后面，该代理会丢弃或破坏浏览器的标头显示自定义字体之前的要求。 （比您想象的更常见）
• 用户正在运行 NoScript，并启用默认字体阻止行为，以防止字体引擎中的 0day 漏洞。

出于这个原因，图像提供了alt 属性。

但是，如果您要使用图标字体，请确保将字形存储在 Unicode 私人使用区域。这将通过确保可能没有冲突来稍微缓解问题（公司有时可以并且确实使用 PUA 字形来存储自定义数据），并且如果它们编码得巧妙，屏幕阅读器可以知道如何优雅地忽略 PUA 字形。

至于实现后备，我建议使用 Modernizr （具体来说，Modernizr.fontface) 来测试支持。

Answer 2

这是一个好主意，但它不适用于所有浏览器（目前）。此外，它仅适用于 2 种彩色图像（黑色和透明），这使得它相当有限。对于拥有文本浏览器或文本转语音软件的人来说，这没有任何意义。它并不是真正的“语义”，因为 标签是用于图像的。从纯 html 的角度来看，使用字体没有任何意义。它还会让你的 CSS 变得混乱。

因此，仅仅减少一点带宽就会带来很多不好的事情；我不会打扰。

Answer 3

• @font-face 并未在各浏览器中得到统一支持。迎合所有浏览器是一项艰巨的任务，尤其是。如果包括 IE6
• 辅助功能：屏幕阅读器不会读取图标，他们仍然会看到“f”而不是图标
• 您需要一些后备才能正常降级

Answer 4

所有其他答案都集中在缺点上。
我个人非常喜欢使用图标字体。
以下是使用图标字体的一些充分理由：

1. 您可以无缝地使用与文本内嵌的图标。如果您在文本块内包含图标，它将继承其父级的字体大小和颜色，并将与随附文本的基线对齐。
2. 您可以使用 css 动态更改图标的颜色，而无需创建和上传额外的图像文件并使用 js 来操作标记。这意味着a）您将样式确定保留在它们所属的位置，即在您的样式表中，b）您可以简单轻松地使图标颜色上下文（例如标题内的所有图标都是白色的，否则它们为黑色）和主题（例如，如果主体具有dark-theme类，则所有图标均为白色，如果主体具有tropical-theme类，则所有图标均为粉红色code>）
3. 可以轻松缩放图标，而无需使用额外的带宽（就像增加图像文件的大小一样），而无需创建和上传额外的图像文件。推论：您不必担心不同的屏幕分辨率，也不需要考虑视网膜等。
4. 您的字体文件的文件大小可能比图像文件更小，因此，再次节省带宽。
5. 如果您使用 fontello 等字体生成器，您的图标集合将自动编目，以供您和您的设计师在演示文件中仔细检查。此外，fontello 有一个 API，因此您的字体生成可以作为构建过程的一部分自动管理。