sonar 掃描報(bào)Unexpected missing generic font family的原因和應(yīng)對(duì)方法

CSS 繼承方式

從 MDN 上可以看到，當(dāng)元素的一個(gè)繼承屬性 （inherited property）沒有指定值時(shí)，則取父元素的同屬性的計(jì)算值（computed value）。

比如 color 屬性就是繼承屬性，給父級(jí)元素設(shè)置了 color，則子元素會(huì)繼承。

font-family 繼承的坑

CSS 屬性 font-family 允許您通過給定一個(gè)有先后順序的，由字體名或者字體族名組成的列表來為選定的元素設(shè)置字體。

屬性 font-family 列舉一個(gè)或多個(gè)由逗號(hào)隔開的字體族，語(yǔ)法如下：

/* 一個(gè)字體族名和一個(gè)通用字體族名 */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* 僅有一個(gè)通用字體族名 */
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 是一個(gè)繼承屬性，比如，我在child元素的父元素.parent 上添加 font-family: serif;，子元素也會(huì)繼承它的屬性值。

.child {
  font-family: unknown;
}

但是，我們給子元素的 font-family 隨便設(shè)置一個(gè)值 unknow，這實(shí)際上是一個(gè)無效的字體。

瀏覽器識(shí)別不出來這是一個(gè)無效的值，計(jì)算值的結(jié)果還是 unknown，但實(shí)際效果則是直接降級(jí)到瀏覽器的默認(rèn)值。此時(shí)并不會(huì)即成父級(jí)元素設(shè)置的值，這跟我們的認(rèn)知還是不一樣的。

然而，假如我們?cè)O(shè)置子元素的樣式如下，即在 test 之后再設(shè)置一個(gè)字體 Gill Sans，

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

就會(huì)降級(jí)到 Gill Sans 了。

關(guān)鍵結(jié)論

我們通常會(huì)在全局樣式中設(shè)置通用字體，以保證字體樣式在不同設(shè)備上呈現(xiàn)時(shí)，至少有一個(gè)最基本的字體樣式可以降級(jí)，而不是直接降級(jí)為系統(tǒng)默認(rèn)字體。

/* 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;

但是當(dāng)我們?yōu)槟承┨囟ㄔ卦O(shè)置字體樣式時(shí)，比如設(shè)計(jì)希望在蘋果設(shè)備上呈現(xiàn)出 PingFang SC 字體樣式。如果理所當(dāng)然的設(shè)定為，

font-family: PingFang SC;

那么會(huì)覆蓋全局設(shè)置的通用字體樣式，而如果該設(shè)備上沒有蘋方字體時(shí)，就會(huì)降級(jí)到系統(tǒng)默認(rèn)字體，而不是設(shè)置的全局通用字體。

實(shí)際工作中需要注意的

因此當(dāng)UI有特殊字體樣式要求時(shí)，請(qǐng)務(wù)必在設(shè)置字體樣式時(shí)，除了特殊字體的聲明，也要保證在特殊字體后邊添加用于降級(jí)的通用字體，比如：

font-family: PingFang SC, sans-serif; /* apple 生態(tài)系統(tǒng)UI很喜歡的字體 */
font-family: Droid Sans, sans-serif; /* Android 生態(tài)系統(tǒng)UI很喜歡的字體 */

否則當(dāng)用戶在系統(tǒng)上設(shè)置了奇怪的默認(rèn)字體時(shí)，您的UI設(shè)計(jì)稿就會(huì)也隨之變得奇奇怪怪。