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

Art*_*sov 7 html css fonts google-chrome font-face

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

正如我在DevTools中看到的那样,该字体是从服务器下载的:DevTools->计算->渲染字体[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;
}
Run Code Online (Sandbox Code Playgroud)

如果我使用Calibri Italic(或Calibri Bold,“ Calibri Italic”,“ Calibri-Italic”等),则此方法无效。如果local(Calibri)在两个浏览器中键入,字体将是本地字体。

Roe*_*elN 5

该错误报告所述,Chrome无法匹配本地字体名称。总之这是由什么浏览器consideres造成名称的字体。Chrome需要使用“ root”名称(在您的情况下为Calibri),并从您的@font-face规则中减去斜体字。Firefox则相反:直接查找名称。该评论证明了这一点。

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