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）
用户位于公司代理的后面，在显示自定义字体之前，该代理会丢弃或破坏浏览器所需的标题。（比你想象的更常见）
用户正在运行NoScript，并启用了默认的字体阻止行为，以防止字体引擎中的0天漏洞利用。

图像提供alt属性就是出于这个原因。

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

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

Answer 2

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

所以这只是为了少一点带宽而带来很多坏事;我不打扰。

Answer 3

@font-face。这是一个迎合所有浏览器的任务。如果包括IE6
辅助功能：屏幕阅读器不会读取图标，他们仍会看到“f”而不是图标
你需要一些后退来优雅地降级

Answer 4

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

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

字体内的图标是否适合网站？

4 个答案: