1

我不了解 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 使用了 Montserrat（本地，系统，95 个字符）”上对此进行了测试。

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

4

1 回答 1

1

似乎与这个打开的铬问题有关。

链接“ 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 正确引用了字体名称。Chrome 找不到本地安装的字体并回退到使用网络字体。Firefox 确实找到了本地安装的字体。

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

于 2018-09-19T20:45:12.253 回答