css - 无法在 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>标签未显示为粗体。 font-weight CSS 中的属性不起作用。甚至在浏览器的检查器中覆盖它也不会改变任何东西。

更新

这个东西似乎只适用于基于 Gecko 的浏览器，比如 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 Fonts UI 2017 - future 可能会有所不同，但任何字体服务的概念都是相同的)

许多字体只有 1 个粗细。