强制Chrome在CSS中使用外部字体

Force Chrome to use external font in CSS

我花了很长时间才弄清楚，Chrome总是比在CSS中链接的同名字体更喜欢本地安装的字体(另请参阅https://stackoverflow.com/a/27704394/1099519)。我的问题是如何找出原因，迫使Chrome不要这样做。

在我的页面https://www.amon.cc/上，我使用Google字体(https://fonts.google.com/specimen/Roboto)的" Roboto Light"，如下所示：

1	<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css" />

在我的CSS文件中，字体声明如下：

1
2
3
4
5
6

body{
...
font-family:Roboto,...;
font-weight:300;
....
}

在FF，IE，Edge中完美运行：

Font in FF, IE, Edge

但是，Chrome中的字体始终较粗：

Font in Chrome with local installed font

原因：在我的私人Windows 10以及商用计算机上，Windows上预安装了字体" Roboto"：Robot Regular，Robot Condensed。但是没有Roboto Thin或Robot Light，因此Chrome似乎可以替代Roboto Regular。

从Windows删除Robot字体集时，Chrome使用声明的Web字体并按照我想要的方式显示它。我不知道如何"强制" Chrome不要使用本地安装，而是使用CDN上的。

但是，Chrome可以在https://fonts.google.com/specimen/Roboto网站上显示所有不同变体的Roboto字体(即使使用我本地安装的Robot字体)。我找不到解决办法。

您可以在CSS中重命名字体，但仍使用遥远的woff文件。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@font-face {
font-family: 'RobotoBis';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
font-family: 'RobotoBis';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
h1 {
font-family: RobotoBis;
}

1	Hello world !

但是这种方法的不利之处在于Google将来可以更改字体URL(主要是可能的)。因此，托管您自己的字体文件可以避免此问题。

当然，它只能应用于您拥有的网站以及可以自定义CSS的网站...