Google Webfont与本地字体冲突

小编典典

Google Webfont与本地字体冲突

css

我在使用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”。我不知道为什么Google称其为“ Oswald”而不是“ Oswald Bold”。所以我不知道如何解决这个问题。

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

你有什么想法？请？

可以重命名webfont-call吗？

阅读 323

2020-05-16

共1个答案

小编典典

您可以编辑CSS @font-face规则以适合您的需求，而不仅仅是从Google加载自动生成的CSS
规则。基本上，问题在于他们的规则更喜欢本地版本（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版本字体时使用即可。

希望对您有所帮助！

2020-05-16