有什么理由不为网站上的图标使用自定义字体吗？
Is there any reason not to use a custom font for icons on a web site?
我很好奇 Imgur 是如何渲染他们的 upvote/downvote 箭头的：
我以为它们是图像，但我发现了一些我没想到的东西：
包含上下箭头字形的自定义字体，分别映射到 'o' 和 'x' 字符：
如今这种方法被认为可以接受吗？我从未考虑过将自定义字体用于无法在语义上映射到字母表的内容。这种方法甚至不在我的网页设计最佳实践范围内。
我可以想象原因：
- 您的站点使用可映射到单字符代码的标准图标集。
- 您只需要控制图标的 foreground/background 颜色。
- 您希望图标的缩放比例与文本相同。
我想知道反对使用这种方法的具体原因。
特别是，我正在寻找解决以下任何问题的答案：
- browser/platform兼容性
- 未来维护影响
- 语义
- 性能
- 符合标准
到目前为止我唯一想到的是，从语义上讲，将 赞成图标 映射到角色 'o' 是没有意义的，并且对角色 'x' 投反对票图标。而且，具体来说，我不是在谈论键盘映射，而是在谈论语言映射、字符代码。在我看来，在这种情况下，光栅图像或 SVG 是更可取的选择。
我想到了另一种可能性：语言和编码兼容性。页面的 html lang 属性或字符编码是否会对字符映射到 CSS 样式表中的字体有任何影响（样式表使用 'x' 表示 投反对票图标)？
不过，我敢肯定 Imgur 已经考虑过了所有这些问题。那么，为什么我错了？
现代浏览器（例如上面的 IE9）支持自定义字体。
甚至 Bootstrap 也为图标使用自定义字体，称为 Glyphicons！这是美化网站图标的好方法，而不必从 Photoshop 中将其作为图像进行处理，这可能会导致响应问题。
它们通常通过调用 class 名称来使用，该名称链接到从字体系列调用图标的 CSS。 Html lang 不会有任何问题。
许多网站使用 "icon fonts"。但是，是的，给它们分配语言字母是错误的。最好为类似箭头的 Unicode 字符代码分配一个箭头图标。另一种选择是使用 Unicode 的私有使用区。在这种情况下，如果您的字体因任何原因无法加载，您将没有好的回退策略。但是如果你为你的图标选择有意义的字符代码，你会。
许多人赞成使用 SVG 而不是图标字体。但是图标字体和 SVG 各有利弊。我认为作为 Web 开发人员，我们可以在针对同一问题的不同实现或解决方案中进行选择，这很棒。
为了回答你的问题，我想说如果做得好，使用字体来实现图标没有错。
正如 Mike 'Pomax' Kamermans 所说：
"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"
一个重要原因是可访问性。有许多浏览器扩展程序可以将网站的字体换成对有不同视觉障碍的人来说更易读的字体。如果您为图标使用字体，这些字体也会被换掉，让您的用户查看您为图标放置的任何字符串。
我很好奇 Imgur 是如何渲染他们的 upvote/downvote 箭头的：
我以为它们是图像，但我发现了一些我没想到的东西：
包含上下箭头字形的自定义字体，分别映射到 'o' 和 'x' 字符：
如今这种方法被认为可以接受吗？我从未考虑过将自定义字体用于无法在语义上映射到字母表的内容。这种方法甚至不在我的网页设计最佳实践范围内。
我可以想象原因：
- 您的站点使用可映射到单字符代码的标准图标集。
- 您只需要控制图标的 foreground/background 颜色。
- 您希望图标的缩放比例与文本相同。
我想知道反对使用这种方法的具体原因。
特别是，我正在寻找解决以下任何问题的答案：
- browser/platform兼容性
- 未来维护影响
- 语义
- 性能
- 符合标准
到目前为止我唯一想到的是，从语义上讲，将 赞成图标 映射到角色 'o' 是没有意义的，并且对角色 'x' 投反对票图标。而且，具体来说，我不是在谈论键盘映射，而是在谈论语言映射、字符代码。在我看来，在这种情况下，光栅图像或 SVG 是更可取的选择。
我想到了另一种可能性：语言和编码兼容性。页面的 html lang 属性或字符编码是否会对字符映射到 CSS 样式表中的字体有任何影响（样式表使用 'x' 表示 投反对票图标)？
不过，我敢肯定 Imgur 已经考虑过了所有这些问题。那么，为什么我错了？
现代浏览器（例如上面的 IE9）支持自定义字体。
甚至 Bootstrap 也为图标使用自定义字体，称为 Glyphicons！这是美化网站图标的好方法，而不必从 Photoshop 中将其作为图像进行处理，这可能会导致响应问题。
它们通常通过调用 class 名称来使用，该名称链接到从字体系列调用图标的 CSS。 Html lang 不会有任何问题。
许多网站使用 "icon fonts"。但是，是的，给它们分配语言字母是错误的。最好为类似箭头的 Unicode 字符代码分配一个箭头图标。另一种选择是使用 Unicode 的私有使用区。在这种情况下，如果您的字体因任何原因无法加载，您将没有好的回退策略。但是如果你为你的图标选择有意义的字符代码，你会。
许多人赞成使用 SVG 而不是图标字体。但是图标字体和 SVG 各有利弊。我认为作为 Web 开发人员，我们可以在针对同一问题的不同实现或解决方案中进行选择，这很棒。
为了回答你的问题，我想说如果做得好，使用字体来实现图标没有错。
正如 Mike 'Pomax' Kamermans 所说：
"Fonts are for encoding vector graphics that are to be used in typesetting context. That can mean letters, or icons, or emoji"
一个重要原因是可访问性。有许多浏览器扩展程序可以将网站的字体换成对有不同视觉障碍的人来说更易读的字体。如果您为图标使用字体，这些字体也会被换掉，让您的用户查看您为图标放置的任何字符串。