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

Question

任何人都可以解释如何实现页面左上角或底部中心的小octocat徽标以及为什么？

我只能看到这个标记：

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