谷歌网络字体与本地字体冲突问题

Question

我在使用google-webfonts时遇到了非常严重的冲突。

这是代码：

这段代码位于头部：

<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>

这是在CSS文件中的内容：

body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }

"Oswald"是一个由3种字体组成的字族:

• book（300）
• normal（400）
• bold（700）

正如你所看到的…我只加载了粗体（700）。 （你可以在查询中看到它） 直到这里都没问题，但是...

问题在于：

我在计算机上安装了3种字体（300、400、700）的桌面版，只要这些字体已激活...浏览器就会在我的html文档中显示错误的字重（400）。

好吧。问题是在我的css中，“Oswald”使用本地字体而不是Web字体。 但是本地字体“Oswald”是“Oswald normal”。 我不知道为什么谷歌将其称为“Oswald”而不是“Oswald Bold”。 所以我不知道如何解决这个问题。

我不想让CSS指向本地字体...我希望它始终显示Web字体...因为要使用正确的字重！

你有什么想法吗？ 拜托了？

是否可以重命名Web字体调用？

- John Doe Smith

Answer 1

您可以编辑CSS的@font-face规则以适应您的需要，而不仅仅是从Google加载自动生成的规则。基本上问题在于他们的规则更倾向于本地版本（src：local（'Oswald Bold'），local（'Oswald-Bold'）...）。更正后的版本将如下所示：

@font-face {
  font-family: 'WebOswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

只需手动将其添加到CSS中，然后在需要使用Google Web字体版本时使用font-family: 'WebOswald';。

希望对你有所帮助！

- Chris

---

这是一个好方法。我也考虑过这个，但问题在于你的代码只加载了.woff文件。另一件事是，当我在查询字符串上使用“&text=”参数时，我会加载整个字体而不仅仅是我需要的字符。因此，我需要一个技巧或一个黑客来避免使用本地字体。 - John Doe Smith

@JohnDoeSmith 你的意思是想使用 &text= 参数，但仍然忽略本地字体吗？ - Chris

是的，就是这样。但我想出了一个适合我的解决方案。总的来说，你的答案是正确的。所以你会得到√ …谢谢 ;) - John Doe Smith

这看起来像是一个很好的答案，但实际上并不是，因为它会产生一些相当严重的副作用。Google生成的CSS取决于使用哪种浏览器（或更准确地说，发送的用户代理字符串），因此这种方式将神秘地失去对某些浏览器的支持... - Jasper

@JohnDoeSmith 我今天刚发现这个，所以我想分享一下。Jasper稍微提到了一下，但是“它实际上会加载您的浏览器可以处理的最小格式。 WOFF提供小文件大小，并且您的浏览器支持它，因此您会看到它。 WOFF也相当广泛地得到支持。然而，在Opera中，您可能会得到字体的TrueType版本。”-ZachRabbit - darcher

截至2014年，似乎每个现代浏览器都支持WOFF。http://caniuse.com/#search=woff 仅旧版IE（IE8-）和Opera Mini不支持它。除非您需要支持IE8-或Opera Mini，否则此解决方案完全可接受。 - Judah Gabriel Himango