1 | # font-weight-notation
|
2 |
|
3 | Require numeric or named (where possible) `font-weight` values. Also, when named values are expected, require only valid names.
|
4 |
|
5 |
|
6 | ```css
|
7 | a { font-weight: bold }
|
8 | /** ↑
|
9 | * This notation */
|
10 |
|
11 | a { font: italic small-caps 600 16px/3 cursive; }
|
12 | /** ↑
|
13 | * And this notation, too */
|
14 | ```
|
15 |
|
16 | Valid font-weight names are `normal`, `bold`, `bolder`, and `lighter`.
|
17 |
|
18 | This rule ignores `$sass`, `@less`, and `var(--custom-property)` variable syntaxes.
|
19 |
|
20 | ## Options
|
21 |
|
22 | `string`: `"numeric"|"named-where-possible"`
|
23 |
|
24 | ### `"numeric"`
|
25 |
|
26 | `font-weight` values _must always_ be numbers.
|
27 |
|
28 | The following patterns are considered violations:
|
29 |
|
30 |
|
31 | ```css
|
32 | a { font-weight: bold; }
|
33 | ```
|
34 |
|
35 |
|
36 | ```css
|
37 | a { font: italic normal 20px sans-serif; }
|
38 | ```
|
39 |
|
40 | The following patterns are _not_ considered violations:
|
41 |
|
42 |
|
43 | ```css
|
44 | a { font-weight: 700; }
|
45 | ```
|
46 |
|
47 |
|
48 | ```css
|
49 | a { font: italic 400 20px; }
|
50 | ```
|
51 |
|
52 | ### `"named-where-possible"`
|
53 |
|
54 | `font-weight` values _must always_ be keywords when an appropriate keyword is available.
|
55 |
|
56 | This means that only `400` and `700` will be rejected, because those are the only numbers with keyword equivalents (`normal` and `bold`).
|
57 |
|
58 | The following patterns are considered violations:
|
59 |
|
60 |
|
61 | ```css
|
62 | a { font-weight: 700; }
|
63 | ```
|
64 |
|
65 |
|
66 | ```css
|
67 | a { font: italic 400 20px sans-serif; }
|
68 | ```
|
69 |
|
70 | The following patterns are _not_ considered violations:
|
71 |
|
72 |
|
73 | ```css
|
74 | a { font-weight: bold; }
|
75 | ```
|
76 |
|
77 |
|
78 | ```css
|
79 | a { font: italic normal 20px sans-serif; }
|
80 | ```
|
81 |
|
82 | ## Optional secondary options
|
83 |
|
84 | ### `ignore: ["relative"]`
|
85 |
|
86 | Ignore the [_relative_](https://drafts.csswg.org/css-fonts/#font-weight-prop) keyword names of `bolder` and `lighter`.
|
87 |
|
88 | The following patterns are _not_ considered violations:
|
89 |
|
90 |
|
91 | ```css
|
92 | a { font-weight: 400; }
|
93 | a b { font-weight: lighter; }
|
94 | ```
|