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

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 Icons 库不依赖于伪类中的 content 属性，实际上每个图标都没有任何明确的 CSS。您可以通过检查他们文档中的示例代码来看到这一点（注意突出显示的元素）：

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

此示例使用称为连字的排版功能，它允许仅通过使用其文本名称来呈现图标字形。替换由网络浏览器自动完成，提供比等效数字字符引用更易读的代码。

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