无法在Google字体上设置字体粗细

Question

这个问题已被问过很多次，但它们都不适合我。例如：

• Google fonts font-weight of 100 is not working。 （我不会在我的系统中使用我想要使用的字体。）
• Why is google font weight not working?。 （我不是在标题中使用它，只是常规段落。）

我使用了@import的Google字体，如下所示：

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

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

字体显示，但我无法对重量做任何事情。 <strong>代码未以粗体显示。 CSS中的font-weight属性不起作用。甚至在浏览器的检查员中都没有改变它。

更新

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

Answer 1

答案是Google字体没有经过校准，无法随身携带所需的所有重量。

某些浏览器可能会显示更厚的＆＃39;或者＆＃39;稀释剂＆＃39;类型，但他们欺骗你。当没有可用的实际重量时，他们将正常字体加倍以模拟您要求的内容。那些做到这一点的人试图变得更好，但现在这更令人困惑而不是有用。根据您的代码段，您有：

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

VS

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

（Google Fonts 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

我有同样的问题。 对我来说，问题是我的引导程序链接放置在html中的styles.css链接之后，因此引导程序覆盖了h1的样式。

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

Answer 4

即使我已经正确地从Google复制了HTML代码并放在脑海中，我也遇到了使砝码起作用的问题。

解决方案：

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