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

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.

Tags:

Css

Fonts