sonar 扫描报Unexpected missing generic font family的原因和应对方法

CSS 继承方式

从 MDN 上可以看到，当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值（computed value）。

比如 color 属性就是继承属性，给父级元素设置了 color，则子元素会继承。

font-family 继承的坑

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

属性 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 是一个继承属性，比如，我在child元素的父元素.parent 上添加 font-family: serif;，子元素也会继承它的属性值。

.child {
  font-family: unknown;
}

但是，我们给子元素的 font-family 随便设置一个值 unknow，这实际上是一个无效的字体。

浏览器识别不出来这是一个无效的值，计算值的结果还是 unknown，但实际效果则是直接降级到浏览器的默认值。此时并不会即成父级元素设置的值，这跟我们的认知还是不一样的。

然而，假如我们设置子元素的样式如下，即在 test 之后再设置一个字体 Gill Sans，

.child {
  font-family: unknown, "Gill Sans";
}

就会降级到 Gill Sans 了。

关键结论

我们通常会在全局样式中设置通用字体，以保证字体样式在不同设备上呈现时，至少有一个最基本的字体样式可以降级，而不是直接降级为系统默认字体。

/* A generic family name only 通用字体 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace``;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

但是当我们为某些特定元素设置字体样式时，比如设计希望在苹果设备上呈现出 PingFang SC 字体样式。如果理所当然的设定为，

font-family: PingFang SC;

那么会覆盖全局设置的通用字体样式，而如果该设备上没有苹方字体时，就会降级到系统默认字体，而不是设置的全局通用字体。

实际工作中需要注意的

因此当UI有特殊字体样式要求时，请务必在设置字体样式时，除了特殊字体的声明，也要保证在特殊字体后边添加用于降级的通用字体，比如：

font-family: PingFang SC, sans-serif; /* apple 生态系统UI很喜欢的字体 */
font-family: Droid Sans, sans-serif; /* Android 生态系统UI很喜欢的字体 */

否则当用户在系统上设置了奇怪的默认字体时，您的UI设计稿就会也随之变得奇奇怪怪。