Chrome 更喜欢网络字体而不是本地字体答案

【问题标题】：Chrome prefers web font over local fontChrome 更喜欢网络字体而不是本地字体
【发布时间】：2018-12-03 21:28:53
【问题描述】：

我不了解 Chrome 加载谷歌字体的方式。这是我的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，本地安装的字体优先。

但是当我检查开发工具时，Chrome 会在“渲染字体”下报告 - 蒙特塞拉特（网络资源 -93 字形）

我在 Firefox（报告“Montserrat Regular - System”）和 Edge（报告“Montserrat Regular used Montserrat (Local, System,95 chars)）上对此进行了测试。

为什么 Chrome 更喜欢网络资源而不是本地安装的字体？

【问题讨论】：

我的 Windows 10 机器安装了 Ubuntu 字体。我在所有浏览器上测试了你的 Ubuntu 字体代码，不仅仅是 Chrome，所有浏览器都下载了谷歌字体。
@TejasSarade，实际上似乎只有 Chrome 正在下载字体。 Edge 和 Firefox 只下载 Google Fonts CSS 文件，而不是实际的 Google 字体。
如果我转到 Firefox 开发者控制台中的字体选项卡，我只会将 Ubuntu 视为 Web 字体。 IE/Edge 也一样。我没有看到使用任何本地字体。

标签： google-chrome google-font-api google-fonts

【解决方案1】：

似乎与this opened chromium issue有关。

链接“http://fonts.googleapis.com/css?family=Special+Elite”

返回这个 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;
}
src 正确引用了字体名称。铬未找到本地安装的字体并回退到使用网络字体。 Firefox 确实找到了本地安装的字体。

如果您修改 CSS 以引用 local('Special Elite')（即字体系列名称），则行为相反：Chrome 找到本地字体，而 Firefox 没有。

【讨论】：