为什么在使用某些图标字体时需要内容？

Question

我习惯使用 Google Material 图标，为此我通常会像这样包含它...

// Pug
link(href="https://fonts.googleapis.com/css?family=Material+Icons&display=block", rel="stylesheet")

里面是这样的代码...

// css
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

但是，我正在使用另一个字体图标文件，我尝试以相同的方式进行操作，但失败了。经过一些调查，似乎需要这样的明确声明...

.ico_thing:before {
  content: "\E000";
}

注意 Google 包没有明确定义内容。为什么在这个库中而不是在 Material 中明确定义？

Answer 1

Google 的 Material 图标库不依赖于伪类中的 content 属性，实际上每个图标都没有任何明确的 CSS图标。您可以通过检查其文档中的示例代码来了解这一点（注意突出显示的元素）：

正如他们所解释的，这要归功于使用 ligatures：

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

如您所述，其他图标库使用 content 的显式声明而不是连字，主要是为了保持对旧浏览器（例如 IE 9 及更低版本）的支持。缺点是 CSS 文件较大。

为什么在使用某些图标字体时需要内容？

Why do I need content when using some icon fonts?

css

fonts

icons

ligature

material-design