首页 文章

Google Webfont与本地字体冲突

提问于
浏览 次
8

我使用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 回答

  • 11

    您可以编辑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的Web版本字体时使用 font-family: 'WebOswald'; .

    我希望有所帮助！

    回复于

相关问题