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

Question

我花了很长时间才弄明白,Chrome总是喜欢本地安装的字体,而不是在css中链接的同名字体(另请参阅/sf/answers/1939307611/).我的问题是如何弄清楚,迫使Chrome不这样做.

在我的页面https://www.amon.cc/我使用来自Google字体的"Roboto Light"(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和商业计算机上,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字体).我无法找到如何做到这一点的技巧.

Answer 1

您可以在 CSS 中重命名字体并仍然使用远处的 woff 文件。例如：

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

<h1>Hello world !</h1>

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

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