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

一般我們都會為 body 標簽，指定 font-family 屬性，為整個網頁設置統一的字體，而且盡可能的使用各個系統下的默認字體。font-family 是前端的一個 CSS 屬性，用來定義字體名稱，控制網頁用什么字體顯示。它會根據所填的字體名稱查找用戶電腦是否有對應的字體，進而讓字體顯示在網頁中。由于 Windows 電腦默認是沒有蘋方的，所以我們的蘋方字體設計稿在 Windows 中就顯示微軟雅黑。看著簡單的文字，其實還可以拆分為更細化的屬性，比如字體、大小、顏色、字重、行高、對齊方式等等。在設計師常用的 Photoshop、Sketch 設計軟件中都有對應的設置。基本上，所有的網頁都需要定義 font-family。為了保持同一個網頁在不同平臺環境的兼容性，需要寫不止一個字體。font-family 也是可以根據不同網站風格和需求設置不同的字體。那么這里就拿個結構更簡單、理解更容易的例子來說明。比如一個比較標準的 font-family 例子，不同字體用英文逗號隔開，含有空格的要加英文雙引號。調用規則是：如果瀏覽器不支持第一個字體，則會嘗試下一個，以此類推。由于英文字體中大多不包含中文，需要先對英文字體聲明，這樣不會影響到中文字體的選擇。所以優先使用效果最好的英文字體，中文字體聲明則緊隨其次。為了讓 Mac 系統使用到顯示效果最好的字體，優先聲明 Mac 系統字體。Win 系統默認沒有安裝 Mac 系統字體，因此會延后調用 Arial 和微軟雅黑。

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

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