无法在 Google 字体上设置 font-weight

Question

这个问题已经被问过很多次了，但是 none 对我有用。例如：

。（我的系统中没有我想要使用的字体。）
。（我没有在标题中使用它，只是在常规段落中使用它。）

我使用 Google 字体和 @import 像这样：

@import url('https://fonts.googleapis.com/css?family=Rubik');

body {
    font-family: 'Rubik', sans-serif;
}

字体出现了，但我无法对字重做任何事情。 <strong> 标签未显示为粗体。 CSS 中的 font-weight 属性无效。甚至在浏览器的检查器中覆盖它也不会改变任何东西。

更新

这东西似乎只适用于 Gecko-based 浏览器，比如 Firefox。

Answer 1

答案是 Google 字体没有经过校准以承载您想要的所有粗细。

某些浏览器可能会显示 'thicker' 或 'thinner' 类型，但它们是在欺骗您。他们将普通字体加倍以模拟您在没有该类型的实际重量可用时所要求的内容。那些这样做的人试图变得友善，但如今它更令人困惑而不是帮助。根据您的代码片段，您有：

@import url('https://fonts.googleapis.com/css?family=Rubik');

对

@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500i,900,900i');

（Google 字体 UI 2017 - 未来可能会有所不同，但任何字体服务的概念都是相同的）

很多字体只有1个字重。

Answer 2

这里列出了字体粗细的所有可能名称；

    Thin            100     
    Extra Light     200
    Light           300
    Regular         400
    Medium          500
    Semi-Bold       600
    Bold            700
    Black           900

Answer 3

我遇到了同样的问题。对我来说，问题是我的 link 到 bootstrap 放在我的 html 中的 link 到 styles.css 之后，因此 bootstrap 覆盖了h1 的风格。

解决方案就是在我的 html 中将 link 到 styles.css 放在 link 到 bootstrap 之后。 :)

Answer 4

即使我已经从 google 中正确地复制了 HTML 代码并输入到我的脑海中，但我也遇到了让权重工作的问题。

解法：

我通过将 @import 函数添加到我的 CSS 来使用它，现在一切正常。似乎 @import 更强大或与 wp 主题冲突更少。

Answer 5

我遇到了同样的问题，直到我发现你不能改变正文的字体粗细。

您必须准确定位要更改权重的标签例如。检查此代码

无法在 Google 字体上设置 font-weight

Can't set font-weight on Google Fonts

css

fonts

google-webfonts

更新