强制Chrome在CSS中使用外部字体 [英] Force Chrome to use external font in CSS

问题描述

我花了很长时间才发现，Chrome总是喜欢本地安装的字体，而不是在css中链接的同名字体（参见

但字体在Chrome中总是较厚：

原因：在我的私人Windows 10和商业计算机上，字体Roboto是预装在Windows上：机器人常规，机器人凝聚。

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

但是，Chrome 可以在 https://fonts.google.com/specimen/Roboto上显示所有不同版本中的Roboto字体网站（即使我的本地安装了Robot字体）。

解决方案

您可以重命名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- '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'）; uncode-range：U + 0000-00FF，U + 0131，U + 0152-0153，U + 02C6，U + 02DA，U + 02DC，U + 2000-206F，U + 2074，U + 20AC，U + U + 2215，U + E0FF，U + EFFD，U + F000;} h1 {font-family：RobotoBis;}  

 < h1> Hello world！< / h1>  

p>

但是这种方法的阴暗之处是，Google可以在将来更改字体网址（这主要是可能的）。所以主机你自己的字体文件，以避免这个问题。

当然，它可以只适用于您自己的网站，你可以自定义CSS ...

It took me a long time to figure out, that Chrome always prefers local installed fonts over a font with the same name that is linked in the css (See also http://stackoverflow.com/a/27704394/1099519). My problem is how to figure out, to force Chrome not to do so.

On my page https://www.amon.cc/ I use "Roboto Light" from Google Fonts (https://fonts.google.com/specimen/Roboto), like this:

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

In my CSS file the font is declared like this:

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

Which works perfectly fine in FF, IE, Edge:

But the font is always thicker in Chrome:

The reason: On my private Windows 10 and also on by business computer the font "Roboto" is pre-installed on Windows: Robot Regular, Robot Condensed. But there is no Roboto Thin or Robot Light, so it seems Chrome has a fallback to Roboto Regular.

When deleting the Robot fontset from Windows, Chrome uses the declared web font and displays it the way I want it. I could not figure out, how to "force" Chrome not to use the local installation and instead use the on the CDN.

However, Chrome can display the Roboto font in all different variants on the https://fonts.google.com/specimen/Roboto website (even with my local installed Robot font). I couldn't find out the trick how this has been done.

解决方案

You can rename the font in your CSS and still use the distant woff file. For example:

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

But the dark side of this method is that Google can change the font URL in the future (that is mainly probable). So host you own font files to avoid this problem.

And of course, it can be apply only for the websites you own and where you can customize the CSS...

这篇关于强制Chrome在CSS中使用外部字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！