CSS 系統(tǒng)自帶字體是指在不設(shè)置font-family屬性或設(shè)置的字體不可用時(shí)，瀏覽器會自動采用操作系統(tǒng)默認(rèn)的字體來渲染網(wǎng)頁。

此時(shí)通過 CSS 預(yù)設(shè)字體，站點(diǎn)在不同操作系統(tǒng)下的展示效果也能大致保持一致。

body {
font-family: -apple-system, BlinkMacSystemFont, 
"Segoe UI", Roboto, "Helvetica Neue", 
Arial, sans-serif, "Apple Color Emoji", 
"Segoe UI Emoji", "Segoe UI Symbol";
}

上述代碼為 Mac 和 iOS 系統(tǒng)下應(yīng)用的系統(tǒng)默認(rèn)字體，主要由以下幾種字體組成：

-apple-system         蘋方字體
BlinkMacSystemFont    三種 Mac OS 系統(tǒng)常用的系統(tǒng)字體
"Segoe UI"            微軟引入的跨系統(tǒng)字體
Roboto                Android 系統(tǒng)字體來源
"Helvetica Neue"      蘋果公司在 Mac OS X 10.10 或之后發(fā)布的字體
Arial                 Window 系統(tǒng)和 Mac OS 中的常用字體
sans-serif            代表無襯線字體
"Apple Color Emoji"   蘋果公司設(shè)計(jì)的 Emoji 圖案字體
"Segoe UI Emoji"      微軟設(shè)計(jì)的 Emoji 圖案字體
"Segoe UI Symbol"     微軟設(shè)計(jì)的符號字體

通過優(yōu)先使用操作系統(tǒng)默認(rèn)的字體，可以提高網(wǎng)頁性能，減少不必要的下載。同時(shí)，不必?fù)?dān)心字體版權(quán)問題，免去了因站點(diǎn)字體侵權(quán)被迫更換字體的風(fēng)險(xiǎn)。但可能的缺陷在于版式過于普遍化，與其他站點(diǎn)或應(yīng)用難以區(qū)分。