css - Web 性能 - Github 是如何生成 "character images"的？

Question

我注意到 Github 上所有的小图片实际上都是字符。对于此示例，我将使用小人物图像，当您将某人分配给某个问题时会使用该图像。如果将鼠标悬停在小人物图像上，您的光标将变为文本光标。如果您检查元素，您会发现 span 的样式具有 内容:“”。我禁用了那条线，图像消失了。看起来他们的小图像都是“字符”。我想这是他们的网站认为他们不必加载这些 Assets 的速度有多快的一个因素。

他们是如何创造这些“人物形象”的？

Answer 1

这是一种字体。您可以在此处找到一个非常流行的“图标字体”示例，地址为 FontAwesome

近来，字体已被用作 sprite 和其他压缩图标图像方法的替代品，并且通常以让过时的浏览器失去乐趣为代价提供改进的性能。例如，IE <=6 不支持 WebFonts，因此在这些浏览器上不会显示任何内容。

但是，对于 大多数 网络开发人员来说，IE 6 及更低版本并不是真正的日常关注点。这真是个好消息，并且使字体图标成为维护大型图标图像库的合理替代方案。