html - 有什么理由不为网站上的图标使用自定义字体吗？

Question

我很好奇 Imgur 如何呈现他们的赞成票/反对票箭头:

我以为它们是图像，但我发现了一些我没想到的东西:

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

如今这种方法被认为可以接受吗？我从未考虑过将自定义字体用于无法在语义上映射到字母表的内容。这种方法甚至不在我的网页设计最佳实践范围内。

我可以想象原因:

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

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

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

• 浏览器/平台兼容性
• future 的维护影响
• 语义
• 表现
• 标准合规性

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

我想到了另一种可能性:语言和编码兼容性。页面的 html lang 属性或字符编码是否会对字符映射到 CSS 样式表中的字体有任何影响(样式表使用“x”表示 < em>否决图标)？

不过，我敢肯定 Imgur 已经考虑过了所有这些问题。那么，为什么我错了？

Answer 1

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

甚至Bootstrap还为图标使用自定义字体，称为 Glyphicons!这是美化网站图标的好方法，而无需从 Photoshop 中将其作为图像进行处理，这可能会导致响应问题。

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