1

我习惯使用 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 中明确定义？

4

1 回答 1

1

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

在此处输入图像描述 在此处输入图像描述

正如他们解释的那样，这要归功于使用连字：

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

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

于 2020-01-08T16:31:34.483 回答