图标字体 HTML 使用

就目前而言，使用图标字体的最佳标记是什么？让我们介绍一些我认为目前最佳的选择。

1. 您希望图标增强某个单词
2. 您希望图标独立存在，但仍然具有功能性或信息性

我们的主要目标是

1. 获得尽可能好的语义
2. 尽可能减少屏幕阅读器的尴尬

这方面的问题之前 曾经 被讨论过 多次，但我认为以下技术向前迈进了一小步。

增强单词

假设我们有一个像“统计”这样的标题，我们希望将其与页面上的其他标题区分开来并强调其含义。语义理想

<h2 id="stats" class="stats-title">Stats</h2>

结果

因此，要将该图标插入其中（请记住，我们在这里讨论的是字体图标，我们不能只是填充左侧并使用背景），我们需要插入一些内容。

使用伪元素很诱人，因为 1）大多数屏幕阅读器不会读取它们 2）我们不需要为图标分配专门的标记，这是一个语义理想。不幸的是，OS X 上的 VoiceOver确实会读取伪元素的内容。（参考 1，参考 2）好吧，也许是“幸运地”，如果我正确地阅读了规范，这就是它应该做的事情。伪元素不在 DOM 中，因此这可能使第三方应用程序更难以处理。

好消息是，如果我们使用一些标记，我们可以使用aria-hidden属性阻止其被朗读。

还有一个坏消息，即使在围绕图标的标记上使用了aria-hidden，OS X 上的 VoiceOver 也会在聚焦时宣布“HTML 内容”。#该死。

但幸运的是！我们仍然可以在这里获胜。如果我们结合使用标记技术和伪元素技术，我们可以插入图标而不会出现 VoiceOver 的奇怪现象。作为双赢的免费赠品，这种组合技术非常适合保持我们的 CSS 简洁高效，因为它不需要类名膨胀，并且可以很好地用于我们需要介绍的下一个用例。

因此，最终的标记变为

<h2 id="stats">
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h2>

CSS 为

[data-icon]:before {
  font-family: icons; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}

太简单了吧？请注意，我们没有为图标使用特定的类名（例如 .icon-stats 或类似的东西），而是使用data-*属性来保存我们要插入的确切字符。在我们的图标字体中，我们将这些特殊字符映射到我们想要使用的图标。我发现这完全是语义化的，甚至具有前瞻性（即使您更改了字符，您也可以随时在以后唯一地进行选择）。但是，如果您更喜欢类名，那也很好，这不会大幅改变此技术。

我们将在最后介绍字符映射。

独立图标

假设我们有一个图标是链接或以某种方式起作用，但它没有伴随任何文本。例如，您可以点击进入购物车的一个购物车图标。希望该功能在视觉上是显而易见的，具有一些悬停状态或一般的设计明显性。但该功能也需要在听觉上是明显的。

与其为此创建一个全新的技术（我过去曾尝试过），不如依靠我们已经开始使用的技术。一个插入字符并使用伪元素的 span，以及紧挨着它的文本，我们在视觉上将其从页面上踢开。

<a href="#rss" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>
</a>

我们只需要很少的额外 CSS，只需通过类应用一些可用性修复，以及一个用于隐藏文本但保留其可访问性的工具箱类。

.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

嘿，它有效

查看演示

2012 年 10 月更新：我创建了一个更合适的演示，比较了使用不同技术的图标字体用法。

无论如何，在 VoiceOver 中。很高兴听到使用其他屏幕阅读器的人们如何评价这一点。

构建/映射您的图标字体

目前，图标字体世界中一个“问题”是，大多数可用的图标字体都预先映射到字母。如果使用不正确的标记，这些字母会变成“内容”并成为文档语义的一部分。或者更糟糕的是，被屏幕阅读器大声朗读。

图标几乎从不应映射到字母。相反，我建议将图标映射到您可以找到的最接近的 Unicode 符号。例如，将心形图标映射到❤是一个绝妙的主意。无论如何，符号的含义都是相对的，因此接近就足够了，并且会立即成为语义改进。

更好的是，我喜欢将图标映射到 Unicode 的“专用区域”的想法。据我了解，这正是它存在的原因，用于您自己的特殊字符。以这种方式映射，您不会有任何危险，屏幕阅读器不会朗读该字符。不幸的是，在撰写本文时，以这种方式映射的图标在最新的 Safari 中甚至都不起作用，因此尚不建议使用。 以下是 Keyamoon 对专用区域问题的概述：

PUA（专用区域）和 SPUA（补充专用区域）之间存在差异。区别在这里 解释了一点。在我的测试中，PUA 映射在所有浏览器中都能完美运行。仅在 Windows 上的 Safari 中，SPUA 映射才会出现错误。IcoMoon 应用程序仅映射到 PUA，至少在短期内是推荐的。

以下是需要遵循的步骤

1. 选择一个图标字体.
2. 访问IcoMoon并加载它（或使用它们的图标集）
3. 选择您想要的图标。
   

   
   

4. 将它们映射到您想要的字符。最好映射到相关的符号或 PUA。
   

   

5. 下载字体/演示。

您还可以使用Pictos Server进行图标选择和映射，但它仅适用于 Pictos，并且无法帮助您选择符号（您可以从此处复制和粘贴）。不过，它是一个非常不错的集合，可以为您托管并简化对现有集合的操作，而无需手动更换字体文件。

未来

将来，希望我们可以依靠speak: none;在任何地方都能完美工作，以便我们可以重新使用伪元素和完美的语义。

相关

• 如果您担心 Firefox 3.5/3.6 和 IE 6-9 中与 @font-face 相关的 FOUT（未设置样式文本闪烁），一种解决方案是尝试使用FOUT-B-Gone。
• 图标字体综述