Is there a way to say "use the current font weight" without making it lighter/bolder?

Question

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.

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 {
  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.

Answer 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):

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:

bolder
Specifies a bolder weight than the inherited value.

lighter
Specifies a lighter weight than the inherited value.

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

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.