Require numeric or named (where possible) font-weight
values.
a { font-weight: bold; }
/** ↑
* This notation */
a { font: italic small-caps 600 16px/3 cursive; }
/** ↑
* And this notation, too */
@font-face { font-weight: normal bold; }
/** ↑
* Multiple notations are available in @font-face */
This rule ignores $sass
, @less
, and var(--custom-property)
variable syntaxes.
The fix
option can automatically fix all of the problems reported by this rule.
string
: "numeric"|"named-where-possible"
font-weight
values must always be numbers.
The following patterns are considered problems:
a { font-weight: bold; }
a { font: italic normal 20px sans-serif; }
@font-face { font-weight: normal bold; }
The following patterns are not considered problems:
a { font-weight: 700; }
a { font: italic 400 20px; }
@font-face { font-weight: 400 700; }
font-weight
values must always be keywords when an appropriate keyword is available.
This means that only 400
and 700
will be rejected, because those are the only numbers with keyword equivalents (normal
and bold
).
The following patterns are considered problems:
a { font-weight: 700; }
a { font: italic 400 20px sans-serif; }
The following patterns are not considered problems:
a { font-weight: bold; }
a { font: italic normal 20px sans-serif; }
Ignore the relative keyword names of bolder
and lighter
.
The following patterns are not considered problems:
a { font-weight: 400; }
a b { font-weight: lighter; }