在网站上使用自定义字体图标有什么不好的原因吗?

4

我很好奇Imgur是如何渲染他们的赞成/反对箭头的:

Imgur upvote/downvote arrows

我原以为它们是图片,但是我发现了一些出乎意料的东西:一个自定义字体,包含向上和向下箭头的字形,分别映射到'o'和'x'字符:

imgur icon-upvote glyph mapped to 'o' character

imgur icon-downvote glyph mapped to 'x' character

content: "x" style disabled

Imgur custom icon font

这种方法现在被认为是可接受的吗?我从未考虑过在没有语义映射到字母表的情况下使用自定义字体。这种方法不在我的Web设计最佳实践列表中。
我可以想象以下原因:
- 您的网站使用可以映射到单字符代码的标准图标集。 - 您只需要控制图标的前景/背景颜色。 - 您希望图标与文本相同比例缩放。
我想知道使用此方法具体的反对理由。
特别是,我正在寻找回答任何以下问题的答案:
- 浏览器/平台兼容性 - 未来维护影响 - 语义学 - 性能 - 标准合规性
到目前为止,我唯一考虑到的是,在语义上,将“upvote”图标映射到字符'o',将“downvote”图标映射到字符“x”是不合理的。而且,仅仅为了明确,我不是在谈论键盘映射,而是在谈论语言映射,即字符代码。在这种情况下,似乎光栅图像或SVG是更可取的替代方案。
我想到了另一个可能性:语言和编码的兼容性。页面的html lang属性或字符编码是否会影响CSS样式表中字体的字符映射(样式表使用“x”表示负分图标)?
然而,我相信Imgur已经考虑过所有这些问题。那么,我错在哪里了?

1
https://css-tricks.com/html-for-icon-font-usage/ https://css-tricks.com/svg-sprites-use-better-icon-fonts/ 或许这两篇文章可以对你有所帮助。字体图标如今非常流行(例如:http://github.com)。 - max
1
@makshh 谢谢 - 你第一个链接中的这些片段值得注意: "将图标映射到字母几乎从来没有意义。" 另外: "更好的是,我喜欢将图标映射到Unicode的'专用使用区域'的想法。据我所知,这正是它存在的原因,用于您自己的特殊字符。以这种方式映射,您不会有屏幕阅读器朗读该字符的危险。" - Parker
1
从第二个链接中:“奇怪的故障:图标字体似乎以奇怪的方式失败。例如,您将字符映射到普通字母,然后字体加载失败,您会得到随机字符。或者您映射到“专用区域”,某些浏览器决定将它们重新映射为非常奇怪的字符,如玫瑰花,但很难复制。或者您想在CDN上托管@ font-face文件,但这是跨源的,Firefox不喜欢,因此您需要服务器提供正确的跨源标头,但您的Nginx设置无法正确获取。 SVG赢了。” - Parker
3个回答

2
现代浏览器(如IE9及以上版本)支持自定义字体。
甚至Bootstrap也使用自定义字体作为图标,称为Glyphicons!这是一种美化网站图标的好方法,而无需像在Photoshop中创建图像那样做,这可能会导致响应问题。
通常通过调用类名来使用它们,该类名链接到从字体系列中调用图标的CSS。 Html lang对此没有任何问题。

我想说的是页面和浏览器回退(怪异模式)的字符编码:UTF-8、ISO 8859-1、windows-1252。字体中的单个字符映射可能会根据代码页而改变,对吧?例如,128-255范围内的字符(例如欧元符号)在将符号映射到底层字符代码时会有所不同。这似乎是合乎逻辑的,这将延续到自定义字体中的字形查找。考虑字体、CSS和HTML文件在不同的代码页中提供的情况。 - Parker

1
许多网站使用“图标字体”。但是,将语言字母分配给它们是错误的。最好将箭头图标分配给类似箭头的Unicode字符代码。另一个选择是使用Unicode的专用使用区域。在这种情况下,如果您的字体由于任何原因加载失败,您将没有良好的备用策略。但是,如果为您的图标选择有意义的字符代码,则会有更好的效果。
许多人支持使用SVG而不是图标字体。但是,图标字体和SVG都有优缺点。我认为,作为Web开发人员,我们可以在不同的实现或解决方案中选择解决相同问题的方法,这是很棒的。
回答你的问题,我想说,如果做得正确,使用字体来实现图标没有问题。
正如Mike 'Pomax' Kamermans所说:
“字体用于编码矢量图形,这些图形将用于排版上下文。这可能是字母、图标或表情符号。”

我卡住的部分是“如果做得对”。在我看来,Imgur正在使用2011年描述的一种方法(在此处),这似乎会破坏HTML和CSS的语义。特别是这两个部分:“可以通过将文本标签包装在标记中来缓解这个问题(我喜欢使用<b>而不是<span>,因为它更小...”和<a href="/" class="icon" data-icon="k">Favourites</a> - Parker
“有意义的字符编码”可能很难定义。单个字符可能会根据其所服务的代码页而映射到不同的字形。 - Parker
1
在http://www.unicode.org/charts/PDF/U2600.pdf中定义的“0x267f”作为无障碍/轮椅图标,其含义在任何地方都是相同的。您可以简单地使用字体,例如<span class="font-icons">♿</span>。我认为这是使用图标字体的正确方式。 - Keyamoon
1
这是一个很好的例子,支持通过直接调用特定编码设置中的某个字符代码来保留每个字形的语义值(即使字体没有该字符代码的字形,该代码仍映射到Unicode标准)。这缓解了在呈现该字形的所有资源上使用相同编码的问题(字体、CSS、HTML)。这也意味着,即使通过其他无关符号(例如数字“6”)正确呈现轮椅字形,也会失去其语义价值。 - Parker

1
一个重要的原因是可访问性。有许多浏览器扩展可以将网站的字体替换为更适合不同视力障碍人群的易读字体。如果您使用字体来制作图标,这些字体也将被替换,使用户看到您为图标放置的任何字符串。

那些扩展不会交换表情符号、Unicode箭头或心形符号,对吧?它们不应该这样做;否则就是一个bug。 - Keyamoon
他们使用的字体可能不支持这些字符。 - suryanaga
如果字体不支持某些字符,就不应该用于显示这些字符。它应该回退到系统字体。类似于我们可以在CSS的@font-face规则中为自定义字体指定代码范围。 - Keyamoon

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接