为什么粗体加粗文本渲染为“超级粗体”？

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>

看起来像

超级大胆！我期望已经font-weight: bold;的内容上的粗体标记被忽略，但它实际上使它更加大胆。

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

---编辑---

实际上，我只是试着评出font-weight：bold;什么都没改变！这是我的字体有问题吗？为什么不是font-weight：bold;工作

---编辑2 ---

看起来早期样式的字体已经是粗体。当我使用“更轻”作为一个值，那就像工作一样，所以看起来字体已经是粗体。因此，剩下的唯一问题是“是否可以使用css获得超级大胆？

Answer 1

您可以使用SD代替font-weight: 900。由于font-weight: bold是this property的最大值，900与bold相同。

例如：

700

.title {
  font-size: 2em;
  font-weight: 900;
  margin: 0.67em 0;
  page-break-after: avoid;
  font-family: Arial, Sans-Serif;
  color: orange;
  text-align: center;
  text-transform: uppercase;
}

Answer 2

font-weights的有效关键字是：

• lighter
• normal
• bold
• bolder

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

范围内的数字字体粗细

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

Answer 3

虽然其他帖子中的各个链接可以解释事情，但SO策略是始终在与问题相同的页面上获得答案，以避免必须单击所有这些链接。

我们走了。

答案在浏览器的内置样式表中。默认情况下，h1有font-weight: bold，b和strong有font-weight: bolder。¹

现在有许多不同的字体粗细。我们没有正常和粗体，我们有9个不同的，编号为100到900.²正常权重是400，bold的定义是700. bolder的定义是“比父母的字体粗体更粗体。

因此，如果你的h1内有b，h1将为粗体（即权重700），内部的b将更大胆（即比700更加大胆。

这基本上就是它的全部内容 知道这一点，有多种解决方案：

• 使用只有两个权重的字体 这不是最好的方法。如果对用户计算机的下一次系统更新包含更多权重的此字体版本会怎样？

• 在样式表中写b {font-weight: bold}，或者更加彻底h1 > * {font-weight: inherit}，这样无论如何，h1的内容总是相同的权重。

• 只需删除＆lt; b＆gt;来自h1内容的标签。在这种特殊情况下，我认为没有任何理由使用它们。

• 或者，保持原样并接受您可以将文本放入更大胆的h1中。这可能有其用途：<h1>Back to <strong>Basics!</strong></h1>

¹但并非所有浏览器都是这种情况。这就是我们需要重置样式表的原因。

²并非所有字体都具有所有字体粗细。许多人只有两个。

Answer 4

在寻找该问题的答案时，我发现不同的浏览器之间存在不同的行为。

（我测试了Chrome（版本72.0.3616.0）和Internet Explorer 11）

<strong><span style="font-weight: bold;">Bold in Chrome, Super Bold in IE</span></strong>

带有CSS <strong>的

font-weight: bold在Chrome font-weight: 700;中呈现为 bold ，而IE总结以 super-bold 结尾的内容{ {1}}