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

一般我們都會爲 body 标簽，指定 font-family 屬性，爲整個(gè)網頁設置統一的(de)字體，而且盡可(kě)能的(de)使用(yòng)各個(gè)系統下(xià)的(de)默認字體。font-family 是前端的(de)一個(gè) CSS 屬性，用(yòng)來(lái)定義字體名稱，控制網頁用(yòng)什(shén)麽字體顯示。它會根據所填的(de)字體名稱查找用(yòng)戶電腦(nǎo)是否有對(duì)應的(de)字體，進而讓字體顯示在網頁中。由于 Windows 電腦(nǎo)默認是沒有蘋方的(de)，所以我們的(de)蘋方字體設計稿在 Windows 中就顯示微軟雅黑(hēi)。看著(zhe)簡單的(de)文字，其實還(hái)可(kě)以拆分(fēn)爲更細化(huà)的(de)屬性，比如字體、大(dà)小、顔色、字重、行高(gāo)、對(duì)齊方式等等。在設計師常用(yòng)的(de) Photoshop、Sketch 設計軟件中都有對(duì)應的(de)設置。基本上，所有的(de)網頁都需要定義 font-family。爲了(le)保持同一個(gè)網頁在不同平台環境的(de)兼容性，需要寫不止一個(gè)字體。font-family 也(yě)是可(kě)以根據不同網站風格和(hé)需求設置不同的(de)字體。那麽這(zhè)裏就拿個(gè)結構更簡單、理(lǐ)解更容易的(de)例子來(lái)說明(míng)。比如一個(gè)比較标準的(de) font-family 例子，不同字體用(yòng)英文逗号隔開，含有空格的(de)要加英文雙引号。調用(yòng)規則是：如果浏覽器不支持第一個(gè)字體，則會嘗試下(xià)一個(gè)，以此類推。由于英文字體中大(dà)多(duō)不包含中文，需要先對(duì)英文字體聲明(míng)，這(zhè)樣不會影(yǐng)響到中文字體的(de)選擇。所以優先使用(yòng)效果最好的(de)英文字體，中文字體聲明(míng)則緊随其次。爲了(le)讓 Mac 系統使用(yòng)到顯示效果最好的(de)字體，優先聲明(míng) Mac 系統字體。Win 系統默認沒有安裝 Mac 系統字體，因此會延後調用(yòng) Arial 和(hé)微軟雅黑(hēi)。

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

所以，爲什(shén)麽 Windows 顯示微軟雅黑(hēi)，Mac 顯示蘋方，歸根到底還(hái)是在于系統中有沒有安裝對(duì)應的(de)字體。兼顧中西，西文在前，中文在後。Font-family 設置的(de)目的(de)就是讓不同的(de)系統在面對(duì)錯綜複雜(zá)的(de)字體環境時(shí)，能夠選擇出适合自己顯示效果最好的(de)字體，以此提高(gāo)網頁界面的(de)視覺兼容性，提升用(yòng)戶體驗。