UNPKG

2 kBMarkdownView Raw
1# font-weight-notation
2
3Require numeric or named (where possible) `font-weight` values. Also, when named values are expected, require only valid names.
4
5<!-- prettier-ignore -->
6```css
7a { font-weight: bold }
8/** ↑
9 * This notation */
10
11a { font: italic small-caps 600 16px/3 cursive; }
12/** ↑
13* And this notation, too */
14```
15
16Valid font-weight names are `normal`, `bold`, `bolder`, and `lighter`.
17
18This 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
28The following patterns are considered violations:
29
30<!-- prettier-ignore -->
31```css
32a { font-weight: bold; }
33```
34
35<!-- prettier-ignore -->
36```css
37a { font: italic normal 20px sans-serif; }
38```
39
40The following patterns are _not_ considered violations:
41
42<!-- prettier-ignore -->
43```css
44a { font-weight: 700; }
45```
46
47<!-- prettier-ignore -->
48```css
49a { 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
56This means that only `400` and `700` will be rejected, because those are the only numbers with keyword equivalents (`normal` and `bold`).
57
58The following patterns are considered violations:
59
60<!-- prettier-ignore -->
61```css
62a { font-weight: 700; }
63```
64
65<!-- prettier-ignore -->
66```css
67a { font: italic 400 20px sans-serif; }
68```
69
70The following patterns are _not_ considered violations:
71
72<!-- prettier-ignore -->
73```css
74a { font-weight: bold; }
75```
76
77<!-- prettier-ignore -->
78```css
79a { font: italic normal 20px sans-serif; }
80```
81
82## Optional secondary options
83
84### `ignore: ["relative"]`
85
86Ignore the [_relative_](https://drafts.csswg.org/css-fonts/#font-weight-prop) keyword names of `bolder` and `lighter`.
87
88The following patterns are _not_ considered violations:
89
90<!-- prettier-ignore -->
91```css
92a { font-weight: 400; }
93a b { font-weight: lighter; }
94```