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

Question

我花了很长时间才弄明白，Chrome总是喜欢本地安装的字体，而不是在css中链接的同名字体（另请参阅https://stackoverflow.com/a/27704394/1099519）。我的问题是如何弄清楚，迫使Chrome不这样做。

在我的页面https://www.amon.cc/上我使用＆＃34; Roboto Light＆＃34;来自Google字体（https://fonts.google.com/specimen/Roboto），如下所示：

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

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

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

在FF，IE，Edge中完美无缺：

但Chrome中的字体总是更厚：

原因：在我的私人Windows 10上以及商业计算机上的字体＆＃34; Roboto＆＃34;预装在Windows上：Robot Regular，Robot Condensed。但是没有Roboto Thin或Robot Light，所以看起来Chrome有一个回归Roboto Regular。

从Windows中删除Robot字体集时，Chrome会使用声明的网络字体并按照我想要的方式显示它。我无法弄清楚，如何强迫＆＃34; Chrome不使用本地安装，而是使用CDN上的。

但是，Chrome 可以显示https://fonts.google.com/specimen/Roboto网站上所有不同版本的Roboto字体（即使使用我本地安装的Robot字体）。我无法找到完成这项工作的技巧。

Answer 1

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

＆＃13;

＆＃13;

@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;
}

＆＃13;

<h1>Hello world !</h1>

＆＃13;

＆＃13;

＆＃13;

但这种方法的黑暗面是Google可以在将来更改字体网址（主要是可能的）。因此，托管您自己的字体文件以避免此问题。

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

Answer 2

花了一些时间才弄清楚这个烂摊子。当我更新Chrome时，这个问题发生在我身上。 为了解决我的mac中的这个问题。我已经打开了字体应用程序，并删除了Roboto字体，然后从https://www.fontsquirrel.com/fonts/roboto-2014重新安装了它。它解决了我的问题。