为什么谷歌字体的字重没有起作用？

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:。但是没有改变任何东西。

- 14wml

---

应该是 h1 而不是 .h1。 - Miro

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; }，然后您会看到它影响了该元素。您甚至可以在CSS规则后面使用高度不推荐的!important来覆盖更具体的CSS规则。

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

编辑：在您的示例中，您可以简单地使用h1选择器选择所有<h1>元素，而不是选择.h1类。您可能犯了一个错误。如果选择器的特异性相同，则CSS样式表的顺序很重要。Bootstrap的样式在您的自定义样式之前被包含，因此您的自定义样式将覆盖Bootstrap的样式。

- ssc-hrep3

---

实际上，只要 OP 的样式表在加载顺序中在 bootstrap.css 之后，它就会用相同的特异性覆盖它。例如，在提供的 fiddle 中，我将 .h1 更改为 h1 并添加了 font-weight: 300;，然后字重发生了变化。 - Heretic Monkey

你说得对，我没有看到他问题中的 .。我会更正回答。 - ssc-hrep3

Answer 2

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

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

- lyhourt Te

Answer 3

如果您正在使用Bootstrap和自定义CSS，请更改链接标签的顺序。先加载Bootstrap，然后再加载您的自定义CSS。

- Emmanuel Akintunde