当前位置：网站首页>Stylelint check error: unexpected missing generic font family font family no missing generic family keyword

Stylelint check error: unexpected missing generic font family font family no missing generic family keyword

2022-07-27 16:41:00 【Blue sky】

problem

stylelint Check and report the following errors ：

115:24 × Unexpected missing generic font family font-family-no-missing-generic-family-keyword

Translated into ： Accidentally lost generic font family …
intend ： It is not allowed to lack generic fonts in the list of used font names

Why?

Should be used at least font-family Add a generic font family name to the list , Because there is no guarantee that the specified font has been installed in the user's computer , There is no guarantee that @font-face The font movement provided can be downloaded correctly . Providing a generic font family allows browsers to use a relatively close alternative font when they cannot get the best font .

resolvent

Add a general font after the currently used font .

font-family grammar

/*  A font family name and a generic font family name  */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
 
/*  There is only one generic font family name  */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;
 
/*  Global value  */
font-family: inherit;
font-family: initial;
font-family: unset;

attribute font-family List one or more font families separated by commas . Each font family consists of <family-name> or <generic-name> Value specifies .
The following example lists two font families , The first one is <family-name>, The second is <generic-name>：

font-family: "Gill Sans Extrabold", sans-serif;

font-family Value

<family-name>： The name of a font family . for example ”Times” and “Helvetica” All font family names . Font family names can contain spaces , But you should use quotation marks when you include spaces .
<generic-name>： Generic font family names are an alternative mechanism , Used to give a better font when the specified font is not available . Generic font family names are keywords , So you can't use quotation marks . There should be at least one generic font family name at the end of the list . The following are the possible values of this attribute and their definitions .
serif： Serif type , There is a special decorative line or serif at the end of the stroke .

for example ：Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif.

sans-serif： Sans serif fonts , That is, the end of the stroke is a smooth font .

for example , “Open Sans”, “Fira Sans”, “Lucida Sans”, “Lucida Sans Unicode”, “Trebuchet MS”, “Liberation Sans”, “Nimbus Sans L”, sans-serif.

monospace： Equal width font , That is, the width of each word in the font is the same .

for example , “Fira Mono”, “DejaVu Sans Mono”, Menlo, Consolas, “Liberation Mono”, Monaco, “Lucida Console”, monospace.

cursive： Cursive script . Some of these fonts have ligatures , Some have special italics . Because usually this font has a little brush effect , So it will give people a feeling of handwriting .

for example ,“Brush Script MT“, “Brush Script Std“, “Lucida Calligraphy”, “Lucida Handwriting”, “Apple Chancery”, cursive.

fantasy：Fantasy Fonts are mainly those with special artistic effects .

for example ,Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

system-ui： The default user interface font obtained from the platform where the browser is located . Because there are great differences in typesetting habits around the world , This general option is provided for typefaces that don’t map cleanly into the other generics.
math： A font designed for the special style problem of displaying mathematical related characters ： Subscript and superscript support 、 Straddle brackets 、 Nested expressions and expressions with different meanings double struck glyphs.
emoji： Designed to present Emoji Emoticon font .
fangsong： A Chinese character font , Between song and regular script . This font is often used in some government documents .

Valid font family name

The family name or the string contained in quotation marks , Or one or more legal identification strings without quotation marks . This means that punctuation characters and numeric characters cannot be used at the beginning of font family names without quotation marks .
for example , The following statement is valid ：

font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

The following statement is invalid ：

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: [email protected], sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;