在 Chrome @font-face local() 中找不到本地字体

Posted 2023-03-06

【中文标题】在 Chrome @font-face local() 中找不到本地字体

【英文标题】：In Chrome @font-face local() does not find local font

【发布时间】：2018-07-17 20:09:22

【问题描述】：

Google Chrome 不使用本地系统的字体，而是从服务器下载，但 Firefox 从本地系统正确使用它。

As I can see in DevTools, the font was downloaded from the server: DevTools -> Computed -> Rendered Fonts [img]

In the Firefox I can see, that we use local font: FirefoxTools -> Fonts[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)，在两个浏览器中字体都是本地的。

【问题讨论】：

我遇到了完全相同的问题（只是字体不同）。根据我的经验，这种情况仅发生在 Chrome/Windows 上。本地字体在 Chrome/Mac 和其他浏览器上得到正确解析。

这对我来说是 Chromium 73 但不是 80 的问题

【参考方案1】：

Chrome 无法匹配本地字体名称，正如 this bugreport 所解释的那样。简而言之，这是由浏览器认为 the 字体名称引起的。 Chrome 需要“根”名称（在您的情况下为 Calibri），并从您的 @font-face 规则中扣除它需要斜体版本。 Firefox 则相反：它直接查找名称。 This comment 证明了这一点。

因此，似乎一种方法在 Chrome 中中断，另一种在 Firefox 中中断，直到此错误得到修复。我想由您决定要使用哪种浏览器行为。

【讨论】：

是否有可能只使用两种类型的引用并在任何情况下都加载字体？

一种可能的解决方法是声明两个引用本地字体的字体系列，“Calibri-Chrome”和“Calibri-Firefox”，并将它们放入您的字体堆栈中。然后在它们都无法加载时添加第三个“Calibri-web”。我还没有测试过这个，但我想它可以像那样工作。