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

Question

我很好奇Imgur如何渲染他们的upvote / downvote箭头：

我认为它们是图像，但我找到了一些我没想到的东西：

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

这几天这种方法是否被认为是可接受的？我从未考虑过将自定义字体用于没有语义映射到字母表的东西。这种方法甚至不是我对网页设计最佳实践的关注。

我可以想象出原因：

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

我想知道使用此方法反对的任何具体原因。

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

• 浏览器/平台兼容性
• 未来的维护影响
• 语义
• 性能
• 标准合规性

到目前为止，我唯一想到的是，在语义上，将 upvote图标映射到字符“o”和 downvote图标<没有意义/ em>到字符'x'。而且，具体来说，我不是在谈论键盘映射，而是语言映射，字符代码。在我看来，在这种情况下，光栅图像或SVG是更优选的替代方案。

我想到了另一种可能性：语言和编码兼容性。页面的html lang属性或字符编码是否会对CSS样式表中字体的字符映射产生任何影响（样式表使用'x'表示 downvote图标）？

但是，我确定Imgur已经考虑过这一切了。那么，为什么我错了？

Answer 1

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

即使Bootstrap也使用自定义字体图标，称为Glyphicons！这是一种美化网站图标的好方法，无需在Photoshop中将其作为可能导致响应问题的图像。

它们通常通过调用类名来使用，该类名链接到从字体系列调用图标的CSS。 Html lang不会有任何问题。

Answer 2

许多网站使用＆＃34;图标字体＆＃34;。但是，是的，给他们分配语言字母是错误的。最好为类似箭头的Unicode字符代码指定箭头图标。另一种选择是使用Unicode的私有使用区域。在这种情况下，如果您的字体因任何原因无法加载，您将无法获得良好的后备策略。但是如果你为你的图标选择了有意义的字符代码，你会的。

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

要回答你的问题，我会说，如果做得对，使用字体实现图标没有任何问题。

Mike＆＃39; Pomax＆＃39; Kamermans说：

  

＆＃34;字体用于编码要使用的矢量图形   排版上下文。这可能意味着字母，图标或表情符号＆＃34;

Answer 3

一个重要原因是可访问性。有许多浏览器扩展程序可以将网站的字体替换为对于具有不同视觉障碍的人更易读的字体。如果您为图标使用字体，这些字体也会被换出，让您的用户查看您为图标添加的任何字符串。