html - 为什么加粗已经加粗的文本呈现为 "super bold"？

Question

使用这个 CSS:

body > h1.title {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
  font-family: Arial, Sans-Serif;
  color: orange;
  text-align: center;
  text-transform: uppercase;
}

<h1 class="title">Back To Basics Log</h1>

呈现像

然后，如果我添加 <b></b>或 <strong></strong>中的标签

<h1 class="title"><b>Back To Basics Log</b></h1>

看起来像

super 大胆!我希望在已经是 font-weight: bold; 的内容上加粗标记被忽视，但它实际上使它更加大胆。

有没有办法通过 CSS 获取第二个版本(我看到的添加了 <b> 标签的版本)？

--- 编辑---

实际上，我只是尝试注释掉 font-weight:bold;并没有改变!这是我字体的问题吗？为什么不是 font-weight:bold;工作？

--- 编辑 2 ---

从早期的样式来看，该字体似乎已经是粗体了。当我使用“打火机”作为一个值时，那是有效的，所以看起来字体已经是粗体了。所以剩下的唯一问题是“是否有可能仅使用 css 变得 super 大胆？

Answer 1

字体粗细的有效关键字是:

• 打火机
• 正常
• 粗体
• 大胆

所以你可能想测试bolder。或 100, 200, 300, 400, 500, 600, 700, 800, 900

范围内的数字字体粗细

不同的字体仅适用于特定的粗细，因此您可能需要进行试验。有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight