为什么使用HTML作为字体实现github徽标？

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来显示饼图。