为什么用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来显示饼图.