css – Google Webfont与本地字体冲突

前端之家收集整理的这篇文章主要介绍了css – Google Webfont与本地字体冲突前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用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 @ 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中,然后使用font-family:’WebOswald’;当你想使用谷歌的Web版本的字体.

我希望有所帮助!

猜你在找的CSS相关文章