有没有办法说“使用当前的字体重量”而不使它更轻/更大胆？

The font-weight property supports numeric values ranging from 100 to 900 inclusive, and keyword values such as normal corresponding to 400 and bold corresponding to 700.

font-weight属性支持范围从100到900（包括100和900）的数值，以及关键字值，例如对应于400的normal和对应于700的粗体。

There's also the bolder and lighter values, which make an element's font weight one step bolder or lighter than the current weight, respectively.

还有更大胆和更轻的值，这使得元素的字体重量分别比当前重量更大或更轻。

Is there a way to say "use the current weight"? That is, I don't want to make the font weight of this element lighter or bolder than its surrounding text — I want it to be the same. Like this, but pretend the span element is really a strong element (because semantics):

有没有办法说“使用当前的重量”？也就是说，我不想让这个元素的字体重量比周围文本更轻或更大 - 我希望它是相同的。像这样，但假装span元素确实是一个强大的元素（因为语义）：

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>

My goal is to use a strong element but without its default font-weight style.

我的目标是使用强大的元素，但没有默认的字体粗细样式。

Obviously font-weight: normal doesn't work, since as mentioned normal specifically corresponds to the numeric weight of 400. I tried font-weight: initial, but that seems to have the same effect as font-weight: normal.

显然font-weight：normal不起作用，因为正如所提到的那样正常对应于400的数字权重。我尝试了font-weight：initial，但这似乎与font-weight：normal有相同的效果。

1 个解决方案

#1

font-weight doesn't have a special keyword value for the "current weight". Instead, you use the CSS-wide inherit keyword to inherit the weight from the parent element (the element that contains the so-called "surrounding text" along with the element in question):

font-weight没有“当前权重”的特殊关键字值。相反，您使用CSS范围的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>

This may not be obvious to those who aren't intimately familiar with the inherit keyword, or CSS inheritance in general. But the reason it works is because font-weight, like all other font properties, is inherited by nature, and in fact the bolder and lighter keyword values are based on the inherited value. From the spec:

对于那些不熟悉inherit关键字或CSS继承的人来说，这可能并不明显。但它起作用的原因是因为font-weight与所有其他字体属性一样，是自然继承的，实际上更大胆和更轻的关键字值是基于继承的值。从规格：

bolder
Specifies a bolder weight than the inherited value.

bolder指定比继承值更大的权重。

lighter
Specifies a lighter weight than the inherited value.

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

So, it follows that one specifies the inherited value, unchanged, by using the inherit keyword.

因此，通过使用inherit关键字，可以指定继承的值，不变。

The (also CSS-wide) initial keyword has the same effect as normal because the initial value of the font-weight property, as defined by the spec, is in fact normal. However, because font-weight is an inherited property, the property defaults to (for when there is no cascaded value) inheritance rather than the initial value of normal — setting initial explicitly results in a cascaded value of initial, which blocks inheritance, thereby resulting in a computed value of 400.

（也是CSS范围的）初始关键字与普通关键字具有相同的效果，因为规范定义的font-weight属性的初始值实际上是正常的。但是，因为font-weight是一个继承属性，所以该属性默认为（对于没有级联值时）继承而不是normal的初始值 - 设置初始显式导致初始化的级联值，这会阻止继承，从而导致计算值为400。

#1