-
Notifications
You must be signed in to change notification settings - Fork 244
Description
Input
.foo {
font-family: 'sans-serif', 'default';
}Output
.foo {
font-family: sans-serif, default;
}Expected
.foo {
font-family: 'sans-serif', 'default';
}font-family: sans-serif means that a generic sans-serif font family will be used, while font-family: 'sans-serif' (with quotes) refers to an actual font that goes by the name of sans-serif.
CSS Spec
Note: this means that if you really have a font whose name is the same as one of the names, or the common-keywords|CSS-wide keyword values, it must be quoted.
To illustrate this, the following unusual font family names are valid because they are quoted:
font-family: "sans-serif", sans-serif;
font-family: "default", sans-serif;
font-family: "initial", sans-serif;
font-family: "inherit", sans-serif;
The full CSS-wide keyword(common-keywords) and <generic-family> in the current specification include:
CSS-wide keyword
https://www.w3.org/TR/css-values-4/#common-keywords
"initial"
"inherit"
"unset"
<generic-family>
https://www.w3.org/TR/css-fonts-4/#generic-font-families
"serif"
"sans-serif"
"cursive"
"fantasy"
"monospace"
"system-ui"
"emoji"
"math"
"fangsong"
"ui-serif"
"ui-sans-serif"
"ui-monospace"
"ui-rounded"
Here's a lint tool: https://mothereff.in/font-family
