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，本地安装的字体具有优先权。

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

我在Firefox（报告“蒙特塞拉特常规-系统”）和Edge（报告“蒙特塞拉特常规使用了蒙特塞拉特（本地，系统，95个字符）”）上对此进行了测试。

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

Answer 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正确引用了字体外观名称。 Chrome找不到   本地安装的字体，然后退回到使用Web字体。   Firefox会找到本地安装的字体。

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

与本地字体相比，Chrome浏览器更喜欢使用网络字体

1 个答案: