Google Webfont与本地字体冲突

时间:2012-08-26 10:28:12

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

与使用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'采用的是localfont,而不是webfont。但当地字体“Oswald”是“Oswald normal”。我不知道谷歌为什么称它为'Oswald'而不是'Oswald Bold'。所以我不知道如何解决这个问题。

我不希望css指向本地字体..我希望它始终显示webfont ...因为正确的字体重量!

你有什么想法吗? 请?

可以重命名webfont-call吗?

1 个答案:

答案 0 :(得分:11)

您可以修改CSS @font-face规则以满足您的需求,而不是仅加载Google自动生成的规则。基本上问题是他们的规则更喜欢本地版本(src: local('Oswald Bold'), local('Oswald-Bold'), ...)。纠正后的verison看起来像:

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

我希望有所帮助!