为什么 github 徽标是用 HTML 作为字体实现的

Question

谁能解释一下页面左上角或底部中央的小章猫标志是如何实现的，为什么？

我只能看到这个标记：

<span class="mega-icon mega-icon-blacktocat"></span>

和这个 CSS：

.mega-icon-blacktocat:before {
    content: "";
}
.mega-icon {
font-family: 'Octicons Regular';
}

我在那里没有看到图片，所以我猜他们正在使用字体。但是为什么会有那个奇怪的  字符，为什么它在样式中而不是在 HTML 中？

Answer 1

这是一种称为CSS字体的技术，他们使用字体将文本替换为完整图标，该图标将位于他们创建的字体文件中。

它允许徽标根据分辨率与网站无限缩放，并倾向于减少加载时间。与图像不同，他们还可以更改颜色并对其应用其他很酷的CSS规则。

诸如Pictos和Picons之类的东西是相似的，因为它们提供了一种字体，例如，您可以使用字母H来显示饼图。