在Chrome @ font-face local（）中找不到本地字体

Question

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） - 两种浏览器字体都是本地的。

Answer 1

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

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