Css 当@font-face定义中包含src:local（）时，材质设计图标无法正确呈现

我最近安装了一个新的ArchLinux系统，使用deepin和GNOMeShell作为桌面环境。 于2019年9月17日更新了整个系统 使用chromium版本77.0.3865.75（官方版本）Arch Linux（64位），我遇到了以下问题：

我有一个web应用程序，它使用从npm中提取的材料设计图标，并使用webpack构建。最后，这是最终呈现的CSS（关于@font-face）：

结果是浏览器不会呈现图标，而是在其位置呈现另一种字体。 如果我删除src:local行（“材质设计图标”）或将其置于其他URL之上，则一切正常。 此外，如果我在机器上本地安装材质设计图标（即来自aur的ttf材质图标git），它也可以工作，并且我可以看到chromium正在从本地版本渲染。 但是，据我所知，即使src:local是最后一个条目，如果字体不是本地安装的，浏览器不应该从其他URL下载吗？ 我尝试刷新本地字体缓存，甚至卸载了它

---

另外，请注意，当使用firefox（Mozilla firefox 69.0）访问该页面时，该页面在系统上运行良好。

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

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

在您的情况下，最后一个有效的

src

属性声明是

src:local（“材料设计图标”），但您（以及大多数其他人）可能没有在本地安装带有此标识符的字体[1]。由于以前的
src
声明已经被破坏，所以没有有效的回退到远程版本


@font-face
是一种有点特殊的情况，出于历史原因，通常有两个
src
声明：第一个声明没有
format（）
，对于不理解后一个详细内容的古代浏览器，它是无效的，因此在其透视图中被忽略

您可能希望将
local
部分放在第二条规则的开头，以便在回退链中首先尝试：
src:local（..），url（…eot）格式（“嵌入式opentype”）/*等等*


[1] 查看标识符应该是“材料图标”或“常规物质主义者”。
因此，在为这个问题绞尽脑汁一周多之后，我终于找到了原因并解决了它。我想我会发布我在这里遇到的根本问题和解决方案，因为这是一个非常特殊的情况

因此，要明确这个问题，它只发生在运行Linux的某些安装中的CHROMIUM上。在我的任何安装中，Firefox上都没有发生这种情况。通过安装新的Arch Linux和Deepin桌面环境，我能够重现这个问题。我多次这样做，发现如果我选择不同的桌面（例如Gnome、Plasma等），问题就不会发生。但是，如果我在安装了Deepin之后安装了Gnome或Plasma，那么即使我删除了所有Deepin软件包，问题仍然会存在

经过多次修补，我终于发现问题可以追溯到特定的FontConfig配置。在出现问题的安装中，有一个文件位于etc/fonts/local.conf，其中包含各种“匹配”和“编辑”元素。我设法找出了引起问题的确切原因。下面是文件的一个分条版本，它只包含有问题的元素。如果我将此文件放在任何安装中，chromium就会出现问题

<?xml version="1.0"?>
  <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
  <fontconfig>
      <match>
          <edit mode="prepend" name="family"><string>Noto Sans</string></edit>
      </match>
  </fontconfig>


诺托桑

不管怎样，删除这个文件或者简单地从文件中删除“prepend”元素都解决了我的问题，但我仍然不知道这是一个“错误”配置，还是chromium中的错误，还是FontConfig中的错误。
阅读您的答案后，我意识到我复制了错误的@font-face。我已经编辑了问题并复制了正确的代码。不过，你的答案确实有效，但问题是我正在处理的项目使用的是NPM的材质图标，因此我无法控制它如何生成css。另外，奇怪的是，它在其他arch linux安装上的chromium版本上工作，在这个版本的机器上的firefox上也没有安装localfont。如果你的应用程序构建正确并且那些
url（fonts/）
路径指向正确的文件，即使没有安装本地字体，它也应该可以工作。我终于发现了这个问题。事实证明，问题根本不在web应用程序中，而是FontConfg和chromium的问题。我贴出了我最初问题的答案，概述了我的发现。
<?xml version="1.0"?>
  <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
  <fontconfig>
      <match>
          <edit mode="prepend" name="family"><string>Noto Sans</string></edit>
      </match>
  </fontconfig>