diff --git a/lib/reference/keywordSets.js b/lib/reference/keywordSets.js index 5b439e19a9..0f3a554903 100644 --- a/lib/reference/keywordSets.js +++ b/lib/reference/keywordSets.js @@ -97,6 +97,10 @@ keywordSets.fontFamilyKeywords = uniteSets(keywordSets.basicKeywords, [ 'fantasy', 'monospace', 'system-ui', + 'ui-serif', + 'ui-sans-serif', + 'ui-monospace', + 'ui-rounded', ]); keywordSets.fontWeightRelativeKeywords = new Set(['bolder', 'lighter']); diff --git a/lib/rules/font-family-name-quotes/README.md b/lib/rules/font-family-name-quotes/README.md index 2c19e7f723..8e59ceda2d 100644 --- a/lib/rules/font-family-name-quotes/README.md +++ b/lib/rules/font-family-name-quotes/README.md @@ -21,7 +21,7 @@ The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatica _Please read the following to understand these options_: -- The `font` and `font-family` properties accept a short list of special **keywords**: `inherit`, `serif`, `sans-serif`, `cursive`, `fantasy`, `system-ui`, and `monospace`. If you wrap these words in quotes, the browser will not interpret them as keywords, but will instead look for a font by that name (e.g. will look for a `"sans-serif"` font) -- which is almost _never_ what you want. Instead, you use these keywords to point to the built-in, generic fallbacks (right?). Therefore, _all of the options below enforce no quotes around these keywords_. (If you actually want to use a font named `"sans-serif"`, turn this rule off.) +- The `font` and `font-family` properties accept a short list of special **keywords**: `inherit`, `serif`, `sans-serif`, `cursive`, `fantasy`, `system-ui`, `monospace`, `ui-serif`, `ui-sans-serif`, `ui-monospace`, and `ui-rounded`. If you wrap these words in quotes, the browser will not interpret them as keywords, but will instead look for a font by that name (e.g. will look for a `"sans-serif"` font) -- which is almost _never_ what you want. Instead, you use these keywords to point to the built-in, generic fallbacks (right?). Therefore, _all of the options below enforce no quotes around these keywords_. (If you actually want to use a font named `"sans-serif"`, turn this rule off.) - Quotes are **recommended** [in the spec](https://www.w3.org/TR/CSS2/fonts.html#font-family-prop) with "font family names that contain white space, digits, or punctuation characters other than hyphens". - Quotes are **required** around font-family names when they are not [valid CSS identifiers](https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier). For example, a font family name requires quotes around it if it contains `$`, `!` or `/`, but does not require quotes just because it contains spaces or a (non-initial) number or underscore. _You can probably bet that almost every font family name you use **will** be a valid CSS identifier_. - Quotes should **never** be used around vendor prefixed system fonts such as `-apple-system` and `BlinkMacSystemFont`.