4

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

我只能看到这个标记：

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

这个CSS：

.mega-icon-blacktocat:before {
    content: "";
}

.mega-icon {
font-family: 'Octicons Regular';
}

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

4

1 回答 1

8

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

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

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

于 2012-11-21T15:50:09.773 回答