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

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)
• 用户在公司代理的后面，该代理会丢弃或破坏您的浏览器在显示自定义字体之前需要的 header 。 (比你想象的更常见)
• 用户运行的 NoScript 启用了默认的字体阻止行为，以防止字体引擎中的 0-day 攻击。

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

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

至于实现回退，我建议使用 Modernizr (具体来说，Modernizr.fontface)来测试支持。