Html 是否有任何理由不在网站上使用自定义字体作为图标？

我很好奇Imgur是如何呈现他们的向上/向下投票箭头的：

我以为它们是图像，但我发现了一些出乎意料的东西：

一种自定义字体，包含向上和向下箭头的标志符号，分别映射到“o”和“x”字符：

这种方法现在被认为可以接受吗？我从来没有考虑过在语义上不映射到字母表的东西上使用自定义字体。这种方法甚至不在我的网页设计最佳实践范围之内

我可以想象其原因：

• 您的站点使用可以映射到单字符代码的标准图标集
• 您只需要控制图标的前景色/背景色
• 您需要缩放与文本相同的图标

我想知道反对使用这种方法的具体原因

特别是，我正在寻找解决以下问题的答案：

• 浏览器/平台兼容性
• 对未来维护的影响
• 语义学
• 演出
• 标准符合性

到目前为止，我唯一想到的是，从语义上讲，将向上投票图标映射到字符“o”和向下投票图标映射到字符“x”是没有意义的。具体来说，我不是在讨论键盘映射，而是语言映射，字符代码。在我看来，在这种情况下，光栅图像或SVG是更可取的选择

我想到了另一种可能性：语言和编码兼容性。页面的

html

lang

属性或字符编码是否会对CSS样式表中字体的字符映射产生任何影响（样式表使用“x”表示下一票图标）

然而，我相信Imgur已经把这一切都想清楚了。那么，为什么我错了呢？

现代浏览器（如上面的IE9）支持自定义字体

甚至还为图标使用自定义字体，称为Glyphicons！这是一个很好的方式来美化网站图标，而不必从Photoshop做它作为一个图像，这可能会导致响应问题

它们通常通过调用类名来使用，该类名链接到调用字体族中图标的CSS<代码>Html语言不会有任何问题。

许多网站使用“图标字体”。但是，给他们分配语言字母是错误的。最好为类似箭头的Unicode字符代码指定一个箭头图标。另一种选择是使用Unicode的专用区域。在这种情况下，如果您的字体由于任何原因无法加载，您将没有一个好的回退策略。但是如果你为你的图标选择有意义的字符代码，你会

许多人赞成使用SVG而不是图标字体。但图标字体和SVG都有利弊。我认为，作为web开发人员，我们可以在同一问题的不同实现或解决方案中进行选择，这是非常棒的

为了回答你的问题，我想说，如果做得对，使用字体来实现图标没有什么错

正如Mike“Pomax”Kamermans所说：

“字体用于对要在中使用的矢量图形进行编码 排版上下文。可以是字母、图标或表情符号。“

---

一个重要原因是可访问性。有许多浏览器扩展，可以将网站的字体替换为对不同视觉障碍的人来说更清晰的字体。如果您使用字体作为图标，这些字体也将被替换掉，让您的用户查看您为图标输入的字符串。

这两篇文章可能会对您有所帮助。字体图标现在非常流行（例如：）。@makshh谢谢-您的第一个链接中的这些片段值得注意：“将图标映射到字母几乎毫无意义。”“更好的是，我喜欢将图标映射到Unicode的‘专用区域’的想法。据我所知，这正是它存在的原因，用于你自己的特殊角色。这样映射，你就不会有被屏幕阅读器说出角色的危险。”@makshh来自第二个链接：“奇怪的失败：图标字体似乎以奇怪的方式失败。例如，您将字符映射为普通字母，然后字体加载失败，您会得到大量随机字符。或者你映射到“私人使用区域”，一些浏览器决定将它们重新映射到像玫瑰这样的奇怪角色，但这很难复制。或者你想在CDN上托管@font-face文件，但这是跨源的，Firefox不喜欢，所以你需要你的服务器提供正确的跨源标题，但你的Nginx设置没有正确地选择。SVG赢了这一场。“我挂断的部分是“如果做对了”。在我看来，Imgur使用的是2011年描述的方法，这似乎打破了HTML和CSS的语义。特别是这两个部分：“这可以通过将文本标签包装在标记中来缓解（我喜欢使用，而不是，因为它更小。。。和

。“有意义的字符代码”可能很难定义。单个字符可能会映射到不同的标志符号，具体取决于它所充当的代码页。分配给“0x267f”的辅助功能/轮椅图标如中所定义的，在任何地方都具有相同的含义。您可以简单地使用字体，就像♿；。我认为这将是使用图标字体的正确方式。这是一个很好的示例，它通过直接调用为页面设置的特定编码中的某些字符代码来支持保留每个字形的语义值（即，即使字体没有字符代码的标志符号，代码仍然映射到Unicode标准）。这缓解了在呈现该标志符号（字体、CSS、HTML）所涉及的所有资源上使用相同编码的问题。这也意味着映射