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

Posted 2023-03-15

【中文标题】为啥谷歌字体粗细不起作用？

【英文标题】：Why is google font weight not working?为什么谷歌字体粗细不起作用？

【发布时间】：2016-11-04 08:22:48

【问题描述】：

我正在尝试将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:。没有改变任何东西。

【问题讨论】：

应该是h1 而不是.h1

【参考方案1】：

font-weight 属性在引导 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 样式。

【讨论】：

实际上，只要 OP 的样式表在加载顺序中位于 bootstrap.css 之后，它就会以相同的特异性覆盖它。例如，在提供的小提琴中，I changed .h1 to h1 and added font-weight: 300; 和权重发生了变化。

你是对的，在他的问题中没有看到.。我会更正答案。

【参考方案2】：

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

h1

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