字体内的图标对网站有好处吗？答案

【问题标题】：Does icons inside font good for site?字体内的图标对网站有好处吗？
【发布时间】：2010-09-05 21:10:53
【问题描述】：

我想创建只包含图标的特殊字体。每个字母都会有不同的图标。我想在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 替换为字体内的图标。我认为这是个好主意吗？字体文件的大小小于许多图像图标。而且通过这种技术，我可以使用不同的字体颜色=不同的图标颜色？尺寸等等。那么，这是个好主意吗？

【问题讨论】：

lab.simurai.com/css/umbrui

标签： css fonts icons

【解决方案1】：

为图标使用自定义字体的问题是你没有备用计划，如果：

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

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

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

至于实现后备，我建议使用Modernizr（特别是Modernizr.fontface）来测试支持。

【讨论】：

【解决方案2】：

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

因此，如果带宽少一点，就会有很多坏事；我不会打扰。

【讨论】：

好吧，我的网站在 html5 和 css3 上，我不关心使用旧浏览器的人。是的，图标将是一种简约的颜色。
o 我认为这对我有好处。更少的代码，没有长链接到图像等等。
@MechanisM 当前的许多浏览器也不支持它。说你“不在乎”对我来说似乎有点傲慢。您想成为唯一能够访问您网站的人吗？
我的网站是我自己的领地。我可以在那里做我想做的一切。我只想看到高级访问者 - 使用现代浏览器等。
只要确保你没有在你设计的其他人的网站上这样做。

【解决方案3】：

@font-face 不支持跨浏览器统一。迎合所有浏览器尤其是一项任务。如果包括 IE6
辅助功能：屏幕阅读器不会读取图标，他们仍会看到“f”而不是图标
您需要一些后备才能优雅降级

【讨论】：

这里也一样。我不关心丑陋的IE和其他旧浏览器。
在 iternet 中有很多站点。因此访问者可以使用其他支持 IE6 的网站。
截至今天，@font-face 几乎是跨浏览器的。如果你使用 .eot 作为 ie，你可以支持 ie4 的任何版本。

【解决方案4】：

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

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

【讨论】：