在Chrome中，@ font-face local()找不到本地字体 [英] In Chrome @font-face local() does not find local font

问题描述

Google Chrome浏览器不使用本地系统中的字体，而是使用服务器中的字体，但是Firefox从本地系统中正确使用了字体.

Google Chrome does not use font from local system and downloads from server instead, but Firefox uses it correctly from the local system.

在DevTools中可以看到，该字体是从服务器下载的:DevTools-> Computed ->渲染字体[img]

在Firefox中，我看到我们使用了本地字体: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)，则在两个浏览器中字体都是本地的.

This doesn't work if I use Calibri Italic (or Calibri Bold, 'Calibri Italic', 'Calibri-Italic', etc.). If I type local(Calibri), in both browsers the font will be local.

推荐答案

Chrome无法匹配本地字体名称，如@font-face规则中减去斜体字. Firefox则相反:直接查找名称. 此评论证明了这一点.

Chrome has trouble matching local font names, as 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 demonstrates that.

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

So it seems one approach breaks in Chrome, the other in Firefox, until this bug is fixed. I suppose it's up to you to determine which browser behaviour you want to go with.

这篇关于在Chrome中，@ font-face local()找不到本地字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！