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)隔開的字體族析桥，語法如下：
/* 一個(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ì)也隨之變得奇奇怪怪震肮。
