Chrome 比本地字体更喜欢网络字体

Question

我不太了解 Chrome 加载 google 字体的方式。这是我的 html:

<html>
<head>
    <title>Montserrat Regular Google Fonts</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
    <p style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 30px;">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt..."
    </p>        
</body>

我在 Windows 10 机器上安装了 Montserrat Regular。据此：https://fonts.googleapis.com/css?family=Montserrat，本地安装的字体优先。

但是当我检查 Dev Tools 时，Chrome 在 "Rendered Fonts" 下报告 - Montserrat（网络资源 -93 Glyphs）

我在 Firefox（报告 "Montserrat Regular - System"）和 Edge（报告“Montserrat Regular used Montserrat (Local, System,95 chars).

为什么 Chrome 优先使用网络资源而不是本地安装的字体？

Answer 1

似乎与this opened chromium issue有关。

Linking "http://fonts.googleapis.com/css?family=Special+Elite"

Returns this CSS:
/* latin */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: local('Special Elite Regular'), local('SpecialElite-Regular'), url(http://fonts.gstatic.com/s/specialelite/v8/9-wW4zu3WNoD5Fjka35JmzxObtw73-qQgbr7Be51v5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
The src correctly references the font face name. Chrome does not find the locally installed font and falls back to using the web font. Firefox does find the locally installed font.

If you modify the CSS to reference local('Special Elite') (i.e. the font family name), then the behaviour is reversed: Chrome finds the local font and Firefox does not.

Chrome 比本地字体更喜欢网络字体

Chrome prefers web font over local font

google-chrome

google-font-api

google-fonts