在界面設(shè)計中經(jīng)常要處理文字，會面對大量的字體對象。網(wǎng)頁中的字體是如何顯示的？這個問題和 CSS 中的 font-family 有著緊密的關(guān)系。當(dāng)我們拿到設(shè)計稿去實現(xiàn)一個網(wǎng)頁時，經(jīng)常會發(fā)現(xiàn)設(shè)計稿當(dāng)中一般使用的字體都是 PingFang SC 這一款字體。這是因為我們的 UI 設(shè)計師 一般使用的都是 Mac 電腦制作的設(shè)計稿。但是我們并不能傻乎乎的就按照設(shè)計稿直接設(shè)置 font-family:PingFang SC; 這樣的代碼。

一般我們都會為 body 標(biāo)簽，指定 font-family 屬性，為整個網(wǎng)頁設(shè)置統(tǒng)一的字體，而且盡可能的使用各個系統(tǒng)下的默認(rèn)字體。font-family 是前端的一個 CSS 屬性，用來定義字體名稱，控制網(wǎng)頁用什么字體顯示。它會根據(jù)所填的字體名稱查找用戶電腦是否有對應(yīng)的字體，進(jìn)而讓字體顯示在網(wǎng)頁中。由于 Windows 電腦默認(rèn)是沒有蘋方的，所以我們的蘋方字體設(shè)計稿在 Windows 中就顯示微軟雅黑?？粗唵蔚奈淖?，其實還可以拆分為更細(xì)化的屬性，比如字體、大小、顏色、字重、行高、對齊方式等等。在設(shè)計師常用的 Photoshop、Sketch 設(shè)計軟件中都有對應(yīng)的設(shè)置?；旧?，所有的網(wǎng)頁都需要定義 font-family。為了保持同一個網(wǎng)頁在不同平臺環(huán)境的兼容性，需要寫不止一個字體。font-family 也是可以根據(jù)不同網(wǎng)站風(fēng)格和需求設(shè)置不同的字體。那么這里就拿個結(jié)構(gòu)更簡單、理解更容易的例子來說明。比如一個比較標(biāo)準(zhǔn)的 font-family 例子，不同字體用英文逗號隔開，含有空格的要加英文雙引號。調(diào)用規(guī)則是：如果瀏覽器不支持第一個字體，則會嘗試下一個，以此類推。由于英文字體中大多不包含中文，需要先對英文字體聲明，這樣不會影響到中文字體的選擇。所以優(yōu)先使用效果最好的英文字體，中文字體聲明則緊隨其次。為了讓 Mac 系統(tǒng)使用到顯示效果最好的字體，優(yōu)先聲明 Mac 系統(tǒng)字體。Win 系統(tǒng)默認(rèn)沒有安裝 Mac 系統(tǒng)字體，因此會延后調(diào)用 Arial 和微軟雅黑。

字體兩種最基礎(chǔ)：有襯線字體 serif 和無襯線字體 sans-serif。其中襯線指的是字母結(jié)構(gòu)筆畫之外的裝飾性筆畫，比如宋體就是典型的有襯線字體，常用于印刷。而在互聯(lián)網(wǎng)時代，用的最多的是無襯線字體，比如微軟雅黑。所以在 UI 設(shè)計中，主要界面框架基本使用的就是無襯線字體。一段 font-family 代碼，最后一個 sans-serif  就表示無襯線字體。關(guān)于通用字體族名，有5種：serif 襯線字體族；sans-serif 非襯線字體族；monospace 等寬字體，即字體中每個字寬度相同；cursive 草書字體；fantasy 主要是那些具有特殊藝術(shù)效果的字體。中文字體界，兩個有代表性的分類——宋體和黑體，分別對應(yīng)著襯線字體和無襯線字體。選擇字體的時候要考慮多操作系統(tǒng)。例如 MAC OS 下的很多中文字體在 Windows 都沒有預(yù)裝，為了保證 MAC 用戶的體驗，在定義中文字體的時候，先定義 MAC 用戶的中文字體，再定義 Windows 用戶的中文字體。

所以，為什么 Windows 顯示微軟雅黑，Mac 顯示蘋方，歸根到底還是在于系統(tǒng)中有沒有安裝對應(yīng)的字體。兼顧中西，西文在前，中文在后。Font-family 設(shè)置的目的就是讓不同的系統(tǒng)在面對錯綜復(fù)雜的字體環(huán)境時，能夠選擇出適合自己顯示效果最好的字體，以此提高網(wǎng)頁界面的視覺兼容性，提升用戶體驗。