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

我正在努力改变h1 to font-weight: 300。除非我这样做：

.h1{
    font-weight: 300;
}

什么都没发生！

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

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

...只有几个元素改变了它们font-weight（看这里：JFiddle）。其余的保持不变。

为什么会发生这种情况？如果有人可以告诉我如何更改字体粗细h1，那将非常感激！

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

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

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

我尝试使用http: as 这个帖子建议。没有改变任何东西。

The font-weight在 bootstrap css 文件中将以下元素的属性设置为 500：

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

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

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

EDIT:但是，在您的示例中，您可以简单地使用h1选择器选择全部<h1>元素而不是选择.h1班级。你可能在那里犯了一个错误。如果选择器具有相同的特殊性，则 CSS 样式表的顺序是相关的。 Bootstrap 的样式包含在自定义样式之前，因此您的自定义样式会覆盖 Bootstrap 样式。