在 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 explains. In short this is caused by what the browser consideres the name for a font. Chrome expects the "root" name (in your case, Calibri) and deducts it needs the italic version from your @font-face rule. Firefox does the reverse: it looks directly for the name. This comment 所示。

所以似乎一种方法在 Chrome 中失效，另一种方法在 Firefox 中失效，直到这个错误被修复。我想由您决定要使用哪种浏览器行为。

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

In Chrome @font-face local() does not find local font

html

css

fonts

google-chrome

font-face