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

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';

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

Answer 1

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

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

如果你想设置一个元素的font-weight，你需要一个selector，它比默认的selector（bootstrap）更具体.如果你例如写一个更具体的 select 或者像 .container-fluid h1 { font-weight: 100; }，你会看到，它会影响元素。您甚至可以在 CSS 规则之后使用高度 non-recommended !important 来覆盖更具体的 CSS 规则。

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

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

Answer 2

只需将您的 CSS 样式表放在 Bootstrap 样式表下。如果您使用 font-weight 和 font-style ，您也需要将其包含在您的 CSS 样式表中，否则它将不起作用。

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

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

Why is google font weight not working?

css

fonts

google-font-api