字体粗细未在 CSS 中应用答案

【问题标题】：font-weight not being applied in CSS字体粗细未在 CSS 中应用
【发布时间】：2021-08-05 13:18:26
【问题描述】：

有谁知道为什么 font-weight 是唯一没有在这种情况下应用的声明？

HTML

<div id="page_title">
    <h3>Page Title</h3>
</div>

CSS

#page_title {
  color: rgb(90, 190, 190); 
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

由于某种原因，颜色和系列都被应用了，但没有应用重量。 div 位于 header 标签内，没有其他样式应用于 header 或 h3 元素。

编辑

值得一提的是，谷歌字体已被导入到 HTML 文件中的外部样式表上方，如下所示：

<!-- Import Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

还值得一提的是，如果我以 h3 选择器而不是 id 为目标，则可以应用字体粗细。所以 font-weight 是有效的，只是如果我使用 id 就不行了。

【问题讨论】：

请发布您必须从 Google 导入 Roboto 字体的代码

标签： css css-selectors

【解决方案1】：

用户代理样式表应用于h3 的font-weight 覆盖了从容器（您的#page-title）级联的font-weight。

尝试将font-weight 直接应用于h3。

但请注意h3 已经是粗体，而font-weight: 700 是an exact equivalent，因此无论如何您都不会看到任何区别。

来自MDN：

【讨论】：

哈哈，我刚刚编辑了我的帖子，说它确实适用于 h3。您能否详细说明用户代理覆盖字体粗细的含义？
我刚刚添加了来自 Chrome Inspector 的屏幕截图。如您所见，默认的font-weight 规则（由浏览器应用）覆盖了您的规则。
好的，我明白您在 Inspector 中所说的内容。这是用户代理所覆盖的一种痛苦。将样式直接应用于 h3 确实有效。他们是一种覆盖用户代理并仍然适用于 ID 的方法吗？
h3 被浏览器样式表直接定位。如果要覆盖该设置，还需要直接定位 h3。
感谢迈克尔的澄清 :)

【解决方案2】：

有时它不起作用，所以你只需导入谷歌字体。

<link href = "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel = "stylesheet" />

验证我的回答是否适合您。

【讨论】：

假定导入的字体。但为了澄清，我编辑了原始帖子，显示了它是如何导入的。所以不幸的是，这不是问题。感谢您的意见。

【解决方案3】：

#page_title {
  color: rgb(90, 190, 190); 
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}
#page_title h3{
  font-weight: 700;
}

<div id="page_title">
  <h3>Page Title</h3>
</div>

【讨论】：

font-weight: 700 等于粗体
那行不通。我认为用户代理覆盖是迈克尔所说的问题。