有什么理由不对网站上的图标使用自定义字体吗？答案

【问题标题】：Is there any reason not to use a custom font for icons on a web site?有什么理由不对网站上的图标使用自定义字体吗？
【发布时间】：2016-02-16 23:29:36
【问题描述】：

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

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

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

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

我可以想象原因：

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

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

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

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

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

【问题讨论】：

css-tricks.com/html-for-icon-font-usage css-tricks.com/svg-sprites-use-better-icon-fonts也许这两篇文章对你有点帮助。字体图标现在非常流行（例如：github.com）。
@makshh 谢谢 - 您的第一个链接中的这些 sn-ps 值得注意：“将图标映射到字母几乎没有意义。” 另外： “更好的是，我喜欢将图标映射到 Unicode 的“私人使用区域”的想法。据我了解，这正是它存在的原因，用于您自己的特殊字符。以这种方式映射，您不会有屏幕阅读器朗读该角色的危险。”
@makshh 来自第二个链接：“奇怪的失败：图标字体似乎以奇怪的方式失败。例如，您将字符映射为普通字母，然后字体加载失败，您会得到随机字符比比皆是。或者你映射到“私人使用区域”，一些浏览器决定将它们重新映射到像玫瑰这样非常奇怪的字符，但很难复制。或者你想在 CDN 上托管 @font-face 文件，但这是跨域的，Firefox 讨厌这样，因此您需要您的服务器提供正确的跨域标头，但您的 Nginx 设置并没有正确处理。SVG 赢得了这一点。”

【解决方案1】：

一个重要原因是可访问性。有许多浏览器扩展程序可以将网站的字体换成对于具有不同视觉障碍的人来说更清晰的字体。如果你为你的图标使用字体，这些也会被换掉，让你的用户看到你为你的图标放置的任何字符串。

【讨论】：

那些扩展不会交换表情符号或 Unicode 箭头或心形符号，对吗？他们不应该；这将是一个错误。
他们使用的字体可能不支持这些字符。
如果字体不支持某些字符，则不应使用它来显示这些字符。相反，它应该回退到系统字体。类似于我们如何在 CSS 的 @font-face 规则中为自定义字体指定代码范围。

【解决方案2】：

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

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

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

正如 Mike 'Pomax' Kamermans 所说：

"字体用于对矢量图形进行编码排版上下文。这可能意味着字母、图标或表情符号”

【讨论】：

我挂断的部分是“如果做得对”。在我看来，Imgur 使用的是 2011 年描述的 here 方法，这似乎破坏了 HTML 和 CSS 的语义。特别是这两部分：“这可以通过将文本标签包装在标签中来缓解（我喜欢使用而不是，因为它更小......” i> 和<a href="/" class="icon" data-icon="k">Favourites</a>.
“有意义的字符代码”可能很难定义。单个字符可以映射到不同的字形，具体取决于它所用作的代码页。
分配给unicode.org/charts/PDF/U2600.pdf 中定义的“0x267f”的辅助功能/轮椅图标在任何地方都具有相同的含义。您可以像使用 ♿ 一样简单地使用字体。我认为这将是使用图标字体的正确方法。
这是一个很好的例子，它通过直接调用为页面设置的特定编码中的某些字符代码来支持保留每个字形的语义值（即，即使字体没有字符代码的字形，代码仍然映射到 Unicode 标准）。这缓解了在渲染该字形（字体、CSS、HTML）所涉及的所有资源上使用相同编码的问题。这也意味着通过不相关的符号（例如数字“6”）映射轮椅字形，即使正确渲染也会失去语义价值。

【解决方案3】：

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

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

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

【讨论】：

我得到的是页面和浏览器回退（怪癖模式）的字符编码：UTF-8、ISO 8859-1、windows-1252。单字符映射到字体可能会根据代码页而改变，对吧？例如，128-255 范围内的字符（例如，欧元符号）differ 在符号到基础字符代码的映射中。这将延续到自定义字体中的字形查找似乎是合乎逻辑的。考虑在不同代码页中提供字体、CSS 和 HTML 文件的情况。