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

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

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

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