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

Question

我与使用google-webaffts有一个非常严重的冲突。好的，这是代码：

这是在头:

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

“奥斯瓦尔德”是由3种字体组成的字体系列：

• 书（300）
• 正常（400）
• 粗体（700）

正如你看到的那样..我只加载了粗体字(700)。(你可以在查询中看到)它一直工作到这里，但是…

问题是：

我的计算机上安装了3种字体（300,400,700）的桌面版本，只要这些字体被激活…浏览器在我的html文档中向我显示了错误的字体权重（400）。

好的。问题是在我的css中，“Oswald”使用的是本地字体，而不是web字体。但当地的字体“奥斯瓦尔德”是“奥斯瓦德正常”。我不知道为什么谷歌把它称为“奥斯瓦尔德”而不是“奥斯瓦尔德·博尔德”。所以我不知道如何解决这个问题。

我不希望css指向本地字体……我希望它总是显示web字体……因为正确的字体权重！

你有什么想法吗？请？

可以重命名网络字体调用吗？

Answer 1

您可以编辑 CSS @font面规则以满足您的需求，而不仅仅是从 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中，并使用font-family：“WebOswald”;当您想使用Google的Web版本的字体时。

我希望这有帮助！