CODEWITHSUNDEEP
cssfonts
BoltClock
BoltClock

Reputation: 724342

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

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.

Upvotes: 17

Views: 898

Answers (2)

Temani Afif
Temani Afif

Reputation: 273787

We can also consider the value unset that will behave as inherit in case there is a value inherited from the parent element and will fall to initial when no value is inherited.

If the cascaded value of a property is the unset keyword, then if it is an inherited property, this is treated as inherit, and if it is not, this is treated as initial. This keyword effectively erases all declared values occurring earlier in the cascade, correctly inheriting or not as appropriate for the propertyref

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>

Worth to note that this value is not supported within IE (https://caniuse.com/#feat=css-unset-value) (not a surprise though)

Upvotes: 0

BoltClock
BoltClock

Reputation: 724342

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.

Upvotes: 12

Related Questions