在Chrome浏览器中，@font-face local()无法找到本地字体。

Question

Google Chrome不使用本地系统中的字体，而是从服务器下载，但Firefox会正确地使用本地系统中的字体。 正如我在开发工具中看到的那样，该字体是从服务器下载的：开发工具-> 计算-> 渲染字体[img] 在Firefox中，我可以看到我们使用本地字体：Firefox工具-> 字体[img]

@font-face {
  font-family: 'Calibri';
  src:  local(Calibri Italic),
        local(Calibri-Italic),
        url('../fonts/calibrii.woff2') format('woff2'), 
        url('../fonts/calibrii.woff') format('woff'), 
        url('../fonts/calibrii.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

如果我使用 Calibri Italic（或 Calibri Bold、'Calibri Italic'、'Calibri-Italic' 等），这个方法就不起作用了。如果我在两个浏览器中键入 local(Calibri)，那么字体将在本地显示。

- Artem Tarasov

---

我有完全相同的问题（只是不同的字体）。从我的经验来看，这种情况只会在Chrome / Windows上发生。本地字体在Chrome / Mac和其他浏览器上可以正确解析。 - TMG

这对我来说是Chromium 73的问题，但不是80的问题。 - binaryfunt

Answer 1

Chrome 在匹配本地字体名称方面存在问题，正如这个错误报告所解释的那样。简而言之，这是由于浏览器认为字体的名称不同造成的。Chrome 期望使用“根”名称（在您的情况下是 Calibri），并从您的 @font-face 规则中推断出需要斜体版本。而 Firefox 则相反：它直接查找名称。这条评论证明了这一点。

因此，在修复此错误之前，似乎其中一种方法会在 Chrome 中出现问题，另一种方法会在 Firefox 中出现问题。我想，取决于您想要采用哪种浏览器行为。

- RoelN

---

那么，是否可以同时使用这两种引用类型并在任何情况下加载字体呢？ - David

一个可能的解决方法是声明两个字体系列，分别引用本地字体，"Calibri-Chrome" 和 "Calibri-Firefox"，并将它们放在你的字体堆栈中。然后添加第三个字体系列 "Calibri-web"，以防它们都无法加载。我没有测试过，但我认为它可以像这样工作。 - RoelN