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

引导程序css文件中的font-weight属性设置为500以下元素：

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

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

使用相同的font-weight覆盖页面的所有样式是不合理的。通常，例如标题的字体权重与常规文本不同。

编辑：但是，在您的示例中，您只需使用h1选择器选择所有<h1>元素，而不是选择.h1类。你可能在那里犯了一个错误。如果您具有相同的选择器特性，则CSS样式表的顺序是相关的。引导样式包含在自定义样式之前，因此您的自定义样式会覆盖引导样式。

Answer 2

只需将CSS样式表放在Bootstrap样式表下。并且如果您使用font-weight和font-style，则还需要将其包括在CSS样式表中，否则它将无法正常工作。

h1
{
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
}

为什么谷歌字体重量不起作用？

2 个答案: