与本地字体相比，Chrome浏览器更喜欢网络字体 [英] Chrome prefers web font over local font
问题描述
我不了解Chrome加载Google字体的方式.这是我的html:
I am not understanding something about the way Chrome loads google fonts. Here is my 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，本地安装的字体优先.
I have Montserrat Regular installed on my Windows 10 machine. According to this: https://fonts.googleapis.com/css?family=Montserrat, locally installed fonts have priority.
但是当我检查开发工具时，Chrome在渲染的字体"下报告-蒙特塞拉特(网络资源-93字形)
But when I check Dev Tools, Chrome reports under "Rendered Fonts" - Montserrat (Network resource -93 Glyphs)
我在Firefox(报告蒙特塞拉特常规-系统")和Edge(报告蒙特塞拉特常规使用了蒙特塞拉特(本地，系统，95个字符)")上对此进行了测试.
I tested this on Firefox (reports "Montserrat Regular - System"), and Edge(reports "Montserrat Regular used Montserrat (Local, System,95 chars).
为什么Chrome比本地安装的字体更喜欢网络资源?
Why is Chrome preferring the network resource over the locally installed font?
推荐答案
似乎与这已解决铬问题.
返回此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会找到本地安装的字体.
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.
如果您修改CSS以引用local('Special Elite')(即 字体系列名称)，那么行为会相反:Chrome找到了 本地字体，而Firefox没有.
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浏览器更喜欢网络字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
