Google Webfont 与本地字体冲突答案

【问题标题】：Google Webfont conflict with local fontGoogle Webfont 与本地字体冲突
【发布时间】：2012-08-21 04:41:58
【问题描述】：

我在使用 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 种字体的字体系列：

书 (300)
正常 (400)
粗体 (700)

如您所见.. 我只加载了粗体字 (700)。（您可以在查询中看到它）它一直有效，但是……

问题是：

我的计算机上安装了这 3 种字体 (300,400,700) 的桌面版本，只要这些字体被激活……浏览器就会在我的 html 文档中显示错误的字体粗细 (400)。

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

我不希望 css 指向本地字体 .. 我希望它始终显示 webfont ...因为正确的字体粗细！

你有什么想法吗？请问？

可以重命名 webfont-call 吗？

【问题讨论】：

标签： css fonts font-face webfonts google-webfonts

【解决方案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 的网络版字体时使用 font-family: 'WebOswald';。

希望对你有所帮助！

【讨论】：

这个不错。我也想到了这一点，但问题是您的代码只加载 .woff 文件。另一件事是，当我在查询字符串上使用“&text =”参数时，我正在加载整个字体，而不仅仅是我需要的字符。所以我需要一个不使用本地字体的技巧或技巧。
@JohnDoeSmith 你的意思是你希望能够使用&text= 参数但仍然忽略本地字体？
是的。而已。但我想出了一个适合我的解决方案。总而言之，你的答案是对的。所以你会得到 √ … thx ;)
这看起来是一个很好的答案，但这并不是因为它有一些相当严重的副作用。谷歌生成的 CSS 取决于使用的浏览器（或者更准确地说，发送的用户代理字符串），所以这样你就会神秘地失去对浏览器的支持......
截至 2014 年，似乎每个现代浏览器都支持 WOFF。 caniuse.com/#search=woff Old IE (IE8-) 和 Opera Mini 是唯一不支持的。除非你需要支持 IE8- 或 Opera Mini，否则这个方案是完全可以接受的。