css - 为什么谷歌字体粗细不起作用？

Question

我正在尝试将 h1 更改为 font-weight: 300。除非我这样做了:

.h1{
    font-weight: 300;
}

什么都没发生!

因此，为了测试其他文本元素的字体粗细，我将整个封装容器 container-fluid 设置为 font-weight: 200:

.container-fluid{
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
}

...只有几个元素改变了它们的font-weight(参见此处:JFiddle)。其余保持不变。

为什么会这样？如果有人可以告诉我如何更改 h1 的字体粗细，将不胜感激!

---

如果相关的话，我正在使用 Chrome。但我也在 Safari 上运行了我的 JFiddle，结果是一样的。

我在 CSS 文件的顶部导入了我需要的所有字体粗细:

/*import custom font*/
@import 'http://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';

我尝试使用 http: 作为 this post建议。没有改变任何东西。

Answer 1

font-weight属性在 Bootstrap css 文件中设置为 500 到以下元素:

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6

如果你想设置一个元素的字体粗细，你需要一个比默认选择器(bootstrap)更具体的选择器。如果你例如写一个更具体的选择器，比如 .container-fluid h1 { font-weight: 100; } ，您会看到，它会影响元素。您甚至可以使用高度不推荐的 !important在 CSS 规则之后覆盖更具体的 CSS 规则。

然而，用相同的字体粗细覆盖页面的所有样式是不合理的。通常，例如标题的字体粗细与常规文本不同。

编辑:然而，在您的示例中，您可以简单地使用 h1选择器选择所有 <h1>元素而不是选择 .h1类(class)。你可能在那里犯了一个错误。如果您具有相同的选择器特异性，则 CSS 样式表的顺序是相关的。 bootstrap 的样式包含在您的自定义样式之前，因此您的自定义样式会覆盖 bootstrap 样式。