Css Can'；t在Google字体上设置字体权重

这个问题已经被问了很多次，但没有一个对我有效。例如：

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

我在导入时使用了Google字体，如下所示：

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

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

字体显示出来了，但我对重量无能为力。

标记不以粗体显示。CSS中的

font-weight

属性不起作用。即使在浏览器的检查器中覆盖它也不会改变任何东西

更新

---

这似乎只适用于基于Gecko的浏览器，比如Firefox。

答案是谷歌字体没有经过校准，无法承载你想要的所有重量

有些浏览器可能会显示“较厚”或“较薄”类型，但它们在欺骗你。当没有那种字体的实际重量时，他们会将普通字体加倍，以模拟你的要求。那些这样做的人是想表现得好一些，但这些天来，这让人困惑，而不是帮助。根据您的代码片段，您有：

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

vs

（谷歌字体用户界面2017-未来可能会有所不同，但任何字体服务的概念都是一样的）

---

许多字体只有一个权重。

这里列出了所有可能的字体权重名称

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

我也有同样的问题。 对我来说，问题在于，在我的html中，指向引导的链接放在指向styles.css的链接之后，因此引导凌驾于h1的样式之上

---

解决方案就是在我的html中，将指向styles.css的链接放在指向引导的链接之后。：）

我也遇到了让权重正常工作的问题，尽管我已经正确地从谷歌复制了HTML代码并将其输入了我的大脑

解决方案：

---

我使用了

@import

功能，将其添加到我的CSS中，现在一切正常。似乎@import与wp主题更为强大或冲突更少。

那么，Rubik的权重是多少？

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