stylelint检查报错：Unexpected missing generic font family font-family-no-missing-generic-family-keyword

问题

stylelint检查报错如下：

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

翻译为：意外丢失的通用字体家族…
意思是：不允许在使用的字体名称列表中缺少通用字体

为什么

应当至少在使用的 font-family 列表中添加一个通用的字体族名，因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用 @font-face 提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。

解决方法

在当前使用的字体后面加上一个通用字体即可。

font-family语法

/* 一个字体族名和一个通用字体族名 */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
 
/* 仅有一个通用字体族名 */
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;
 
/* 全局值 */
font-family: inherit;
font-family: initial;
font-family: unset;

属性 font-family 列举一个或多个由逗号隔开的字体族。每个字体族由 <family-name> 或 <generic-name> 值指定。
下面的例子列举了两个字体族，其中第一个是 <family-name>，第二个是 <generic-name>：

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

font-family取值

• <family-name>：一个字体族的名字。例如”Times” 和 “Helvetica” 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。
• <generic-name>：通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。 以下是该属性可能的取值以及他们的定义。
• serif：带衬线字体，笔画结尾有特殊的装饰线或衬线。

例如：Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif.

• sans-serif：无衬线字体，即笔画结尾是平滑的字体。

例如， “Open Sans”, “Fira Sans”, “Lucida Sans”, “Lucida Sans Unicode”, “Trebuchet MS”, “Liberation Sans”, “Nimbus Sans L”, sans-serif.

• monospace：等宽字体，即字体中每个字宽度相同。

例如， “Fira Mono”, “DejaVu Sans Mono”, Menlo, Consolas, “Liberation Mono”, Monaco, “Lucida Console”, monospace.

• cursive：草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。

例如，“Brush Script MT“, “Brush Script Std“, “Lucida Calligraphy”, “Lucida Handwriting”, “Apple Chancery”, cursive.

• fantasy：Fantasy 字体主要是那些具有特殊艺术效果的字体。

例如，Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

• system-ui：从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，这个通用选项 is provided for typefaces that don’t map cleanly into the other generics.

• math：针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的double struck glyphs。

• emoji：专门用于呈现 Emoji 表情符号的字体。

• fangsong：一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。

有效的字体族名

体族名或者是引号包括的字符串，或者是不含引号的一个或多个合法标识串构成的。字这意味着在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。
例如，以下的声明是有效的：

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

以下的声明是无效的：

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: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

官方文档

font-family-no-missing-generic-family-keyword：https://stylelint.io/user-guide/rules/list/font-family-no-missing-generic-family-keyword

font-family：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family