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

Question

我花了很长时间才弄清楚，Chrome 总是更喜欢本地安装的字体，而不是 css 中链接的同名字体（另请参阅 ).我的问题是怎么弄清楚，强制Chrome不这样做。

在我的页面上 https://www.amon.cc/ I use "Roboto Light" from Google Fonts (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 和商用计算机上，字体 "Roboto" 预装在 Windows 上：Robot Regular，Robot Condensed。但是没有 Roboto Thin 或 Robot Light，因此 Chrome 似乎可以回退到 Roboto Regular。

从 Windows 中删除 Robot 字体集时，Chrome 使用声明的网络字体并按照我想要的方式显示它。我不知道如何 "force" 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...

Answer 2

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

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

Force Chrome to use external font in CSS

css

fonts

google-chrome

google-webfonts