有没有一种方法可以说“使用当前的字重”，而不使它更轻/更粗？

Question

font-weight属性支持100到900范围内的数值，以及关键字值，例如normal对应400和bold对应700。

还有和lighter值，分别使元素的字体加粗或变细一步。

是否有一种方法可以说“使用当前权重”？ 也就是说，我不想使此元素的字体比周围文本更轻或更粗，我希望它保持相同。 就像这样，但假装span元素实际上是一个strong元素（因为语义）：

span {
  text-transform: uppercase;
}

header {
  font-weight: bold;
}

<header>
  <h1>Header</h1>
  <p>This is a <span>header</span>.</p>
</header>
<footer>
  <p>This is a <span>footer</span>.</p>
</footer>

我想使用strong元素，但不需要它默认的font-weight样式。

很明显，font-weight:normal不起作用，因为如上所述，normal特指数字权重400。我尝试过font-weight:initial，但效果与font-weight:normal相同。

- BoltClock

---

我对这个问题有点困惑：lighter和bolder关键字已经相对于当前的字重（从最近的祖先继承指定的字重，或者如果没有指定，则使用浏览器默认值）。 - Mike 'Pomax' Kamermans

@Mike 'Pomax' Kamermans：是的，我的问题是如何指定当前字重，而不使它变得更轻或更粗。让我看看能否想出一个更好的标题。 - BoltClock

我仍然不确定你在问什么——当前权重只是继承的，除非其他规则覆盖它（或者真正地推翻它）。问题的一部分在于你谈论“周围文本”。在HTML/CSS中没有这样的东西。有元素树，你展示的是两个毫不相关的段落树。你展示的跨度已经与它们所在的<p>相同了，因为继承，那么...实际问题是什么？ - Mike 'Pomax' Kamermans

@Mike 'Pomax' Kamermans：实际问题在于没有意识到继承是使元素与其父元素具有相同权重的原因，这就是我的问题和自我回答。并非每个人都以元素树为思考方式。（我是这样做的，但显然我在这里犯了一个大错。） - BoltClock

他们不会，这就是为什么解释CSS的工作原理是我们的责任，当有人似乎没有牢固掌握DOM树的基础知识以及它如何与“层叠”部分的层叠样式表相结合时。 - Mike 'Pomax' Kamermans

@Mike 'Pomax' Kamermans：因此，我编辑了我的答案，增加了一些关于元素树的内容。 - BoltClock

Answer 1

font-weight没有一个专门的关键字值来表示“当前的字重”。相反，您可以使用CSS-wide inherit 关键字从父元素（包含所谓的“周围文本”以及相关元素的元素）继承字重：

strong {
  font-weight: inherit;
  text-transform: uppercase;
}

header {
  font-weight: bold;
}

<header>
  <h1>Header</h1>
  <p>This is a <strong>header</strong>.</p>
</header>
<footer>
  <p>This is a <strong>footer</strong>.</p>
</footer>

对于那些不熟悉inherit关键字或CSS继承的人来说，这可能并不明显。但它能够起作用是因为像所有其他字体属性一样，font-weight是天然继承的，实际上bolder和lighter关键字值是基于继承值的。从spec:

bolder
指定比继承值更粗的字重。

lighter
指定比继承值更轻的字重。

因此，使用inherit关键字可以保持继承值不变。

（也是CSS-wide）initial关键字与normal具有相同的效果，因为根据规范定义，font-weight属性的初始值实际上是normal。然而，由于font-weight是一个继承属性，当没有级联值时，该属性默认为继承而不是normal的初始值——明确设置initial会导致cascaded value的级联值为initial，从而阻止继承，进而导致computed value为400。

- BoltClock

Answer 2

我们还可以考虑值unset，如果从父元素继承了值，则会表现为inherit，当没有继承值时则会变为initial。

如果属性的级联值是unset关键字，则如果它是继承属性，则将其视为inherit，如果不是，则将其视为initial。该关键字有效地擦除了级联中早期出现的所有声明值，正确地继承或不适用于该属性^ref

strong {
  font-weight: unset;
  text-transform: uppercase;
}

header {
  font-weight: bold;
}

<header>
  <h1>Header</h1>
  <p>This is a <strong>header</strong>.</p>
</header>
<footer>
  <p>This is a <strong>footer</strong>.</p>
</footer>

值得注意的是，这个值在IE中不受支持（https://caniuse.com/#feat=css-unset-value）（虽然并不意外）。

- Temani Afif