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

【问题标题】：Force Chrome to use external font in CSS强制 Chrome 在 CSS 中使用外部字体
【发布时间】：2017-02-22 11:36:29
【问题描述】：

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

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

<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 使用声明的网络字体并以我想要的方式显示它。我不知道如何“强制”Chrome 不使用本地安装，而是使用 CDN 上的。

但是，Chrome 可以在 https://fonts.google.com/specimen/Roboto 网站上以所有不同的变体显示 Roboto 字体（即使使用我本地安装的 Robot 字体）。我不知道这是怎么做到的。

【问题讨论】：

标签： css google-chrome fonts google-webfonts

【解决方案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;
}

&lt;h1&gt;Hello world !&lt;/h1&gt;

但这种方法的阴暗面是 Google 可以在未来更改字体 URL（这很可能）。所以托管你自己的字体文件以避免这个问题。

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

【讨论】：

有趣的方法！感谢您指出 Google 可能更改网址的问题。在我的情况下，“Roboto”在 Apache 许可下，所以我可以自己进行托管（我可能会这样做）并且根本不会使用 google 网络字体。我检查了为什么它可以在 Google Web Fonts 页面上运行。那里的字体名称不是“Roboto”，而是“Roboto script=all rev=1”（字体系列：“Roboto script=all rev=1”，“Adobe Blank”）。我想这可能与您在本地重命名字体的方式相同。

【解决方案2】：

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

【讨论】：