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.