css - 当 src : local() included in @font-face definition 时，Material Design 图标无法正确呈现

Question

我最近安装了一个新的arch linux系统，使用deepin和gnome shell作为桌面环境。 2019年9月17日更新整个系统 使用 chromium 版本 77.0.3865.75(官方构建)Arch Linux(64 位)我遇到了以下问题:

我有一个 Web 应用程序，它使用从 npm 提取并使用 webpack 构建的 material-design-icons。最后，这是呈现的最终 CSS(关于@font-face):

@font-face {
        font-family: Material Icons;
        font-style: normal;
        font-weight: 400;
        src: url(fonts/MaterialIcons-Regular.eot);
        src: local("Material Icons"), local("MaterialIcons-Regular"), url(fonts/MaterialIcons-Regular.woff2) format("woff2"), url(fonts/MaterialIcons-Regular.woff) format("woff"), url(fonts/MaterialIcons-Regular.ttf) format("truetype")
    }

结果是浏览器不呈现图标，而是在其位置呈现另一种字体。 如果我删除行 src: local("Material Design Icons") 或将其放在其他 URL 之上，一切正常。 此外，如果我在机器上本地安装 Material Design Icons(即来自 aur 的 ttf-material-icons-git)，它也可以工作，我可以看到 chromium 是从本地版本渲染的。 但是，据我了解，即使 src:local 是最后一个条目，如果本地未安装字体，浏览器不应该只从其他 URL 下载吗？ 我试过刷新本地字体缓存甚至卸载

另外，请注意，当使用 firefox (Mozilla Firefox 69.0) 访问时，该页面在系统上可以完美运行

Answer 1

通常，同一规则集中后续有效的 CSS 属性重新声明会覆盖同一属性的先前实例。

* {
 color: red;
 color: blue; /* "wins" */
 color: blargh;
}

在你的情况下，最后一个有效的 src 属性声明是 src: local("Material Design Icons");，但大概是你(以及大多数其他人)没有使用此标识符 [1] 的本地安装字体。由于之前的 src 声明已经被丢弃，因此没有回退到有效的远程版本。

---

@font-face 是一种特殊情况——由于历史原因——通常有两个 src 声明:第一个没有 format() 对于不理解后者冗长的古代浏览器，在他们看来什么是无效的因此被忽略。

您可能希望将 local 部分放在第二条规则的开头，以便它在后备链中首先尝试:src: local(..), url (..eot) format("embedded-opentype")/*等等*/;.

---

[1] 查看guide标识符应该是“Material Icons”或“MaterialIcons-Regular”。