引言

我們在界面設計中經常要處理文字，會面對大量的字體對象。網頁中的字體是如何顯示的？這個問題和 CSS 中的 font-family 有著緊密的關系。通過本文，我們可以了解到設計稿和線上頁面字體的關系，以及 Emoji 表情文字的顯示方法，一起揭開字體中的秘密。

走查中的問題

UI 設計師在一個網頁項目中需要做哪些工作？

這是一個沒有固定標準答案的問題，因為不同段位的設計師、不同類型的項目、不同水平的團隊都會面對不一樣的工作挑戰。但是總會有幾項工作是 UI 設計師必須經歷的，這其中就包括了頁面設計走查這個環節。

可能有些同學要笑了：走查么，很簡單，對比測試頁面和設計稿就可以輕松搞定。

不過實際上，走查可并沒有這么簡單。除了色彩、對齊、交互等明顯的設計缺陷之外，我們還需要借助工具挖掘隱性的設計問題。比如經常會出現下面這個場景：

設計師：大神，PC 端的 UI 稿確定了，趕緊開發吧！

程序員：好的，看我的

……

程序員：走查吧，絕對沒問題

設計師：為什么 Windows 電腦文字不是蘋方字體呢？

程序員：因為……

其實同一個設計稿在不同系統中顯示的字體可能會不一致，在走查中屬于正常現象，并不是技術同學疏忽了。這其中的原因就需要我們了解下網頁中的字體。

網頁中的蘋方字體

我們在設計網頁 UI 界面時，文字作為其中最基礎的原子元素之一，成為設計師工作中經常打交道的對象，同時也是用戶獲取網頁信息的重要來源。

看著簡單的文字，其實還可以拆分為更細化的屬性，比如字體、大小、顏色、字重、行高、對齊方式等等。在設計師常用的 Photoshop、Sketch 設計軟件中都有對應的設置。

其中字體是最容易自定義和擴展的屬性，同時也是容易疏忽的屬性。很多設計師在工作會遇到這樣的情況：使用 Mac 端的 Sketch 來設計網頁，用的字體也是標準的蘋方，但是上線后，在 Windows 電腦中網頁顯示的字體卻是微軟雅黑，這個現象并不屬于 bug，程序員的代碼也沒錯。

那么為什么會形成不同的字體呢？Windows 中的蘋方去哪兒了？這一切要從 font-family 說起。

font-family屬性簡介

font-family 是前端的一個 CSS 屬性，用來定義字體名稱，控制網頁顯示什么字體。它會根據所填的字體名稱查找用戶電腦是否有對應的字體，進而讓字體顯示在網頁中。由于 Windows 電腦默認是沒有蘋方的，所以我們的蘋方字體設計稿在 Windows 中就顯示微軟雅黑。

雖然 font-family 是一個前端專業術語，但是我們設計師在日常工作中其實也是見過 font-family 的。比如藍湖的右側標注最下方代碼區就可以看到，其中的文字就使用了蘋方字體。

同時在 UI 設計新秀 Figma 中，Code 模式也會有 font-family 的身影。

不過，以上設計軟件和工具使用的是 Mac 系統，自帶蘋方字體，所以蘋方就是默認的顯示字體了。

基本上，所有的網頁都需要定義 font-family。為了保持同一個網頁在不同平臺環境的兼容性，需要寫不止一個字體。

我們在走查網頁的時候可以通過檢查網頁元素來看目標文字調用的 font-family 代碼。比如下方圖片就是一個用 Chrome 瀏覽器檢查代碼的例子。可以看到目標字體的 font-family 調用了一大堆字體代碼，其中有些我們并不陌生。

那么這些字體代碼都是什么含義？會對我們的頁面設計產生什么樣的影響呢？

Font-family調用規則

和我們設計師做?UI?界面類似，font-family 也是可以根據不同網站風格和需求設置不同的字體。

那么這里就拿個結構更簡單、理解更容易的例子來說明。比如下方就是一個比較標準的 font-family 例子，不同字體用英文逗號隔開，含有空格的要加英文雙引號。

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB" "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

調用規則是：如果瀏覽器不支持第一個字體，則會嘗試下一個，以此類推。

上面 font-family 屬性中的列出的字體都是網絡最常用的，當然不同項目也可以根據具體業務需求自定義設置。但是無論怎么設置都需要遵守以下兩點：

• 由于英文字體中大多不包含中文，需要先對英文字體聲明，這樣不會影響到中文字體的選擇。所以優先使用效果最好的英文字體，中文字體聲明則緊隨其次。
• 為了讓 Mac 系統使用到顯示效果最好的字體，優先聲明 Mac 系統字體。Win 系統默認沒有安裝 Mac 系統字體，因此會延后調用 Arial 和微軟雅黑。

一句話總結就是：優先 Mac 系統和英文，這樣可以確保文字能夠最大程度地使用最適合的字體，提升用戶體驗。

好了，我們現在已經知道網頁字體在網頁端的 CSS 調用方式了，剩下的就需要我們認識比較常用的字體名稱。問題來了，以上 font-family 中的字體都代表什么意思呢？

常用字體代碼介紹

在介紹之前先來了解下兩種最基礎的字體：有襯線字體 serif? 和無襯線字體 sans-serif。

其中襯線指的是字母結構筆畫之外的裝飾性筆畫，比如宋體就是典型的有襯線字體，常用于印刷。而在互聯網時代，用的最多的是無襯線字體，比如微軟雅黑。所以在 UI 設計中，主要界面框架基本使用的就是無襯線字體。

我們再看一下前面提到的 font-family 代碼，最后一個 sans-serif? 就表示無襯線字體。

font-family:
"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB""Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

別擔心，代碼中的字體其實很多我們都見過，下面一起看下吧。

1. Helvetica

Mac 系統的默認無襯線英文字體，充滿了科技感，應用范圍很廣泛。于 1957 年由瑞士字體設計師設計。需要注意的是 Windows 系統默認是沒有的。

2. Helvetica Neue

Mac 系統 Helvetica 字體改善版本，且增加了更多不同粗細與寬度的字形。

3. Arial

1982 年模仿 Helvetica 而發明的英文字體，應用很廣，也是 Windows 系統默認字體。

4. PingFang SC

蘋果專為中國用戶打造的中文字體，也是 UI 設計師做界面默認使用的字體。另外，和 SC 同時出現的還有 TC 和 HK，分別代表簡體中文、中國臺灣繁體和香港繁體。

5. Hiragino Sans GB、Heiti SC

蘋果麗黑和黑體-簡，是 Mac 舊版本的中文字體，目前用的不多，主要目的是兼容舊 Mac 系統。

6. Microsoft YaHei

微軟雅黑，Windows 系統默認的中文字體，也是最常見的中文字體。這里需要注意，微軟雅黑是有版權的。

7. WenQuanYi Micro Hei

文泉驛微米黑，Linux 系統下默認中文字體，為了兼容 Linux 系統。

8. sans-serif

無襯線字族，當所有的字體都找不到時，可以使用字體族名稱作為操作系統最后選擇字體的方向。

Emoji表情字體

以上是常見的文字字體，在工作生活中我們也會遇到很多文字中的表情。比如經典的蘋果表情系列。

這些表情其實也是字體，在 font-family 中，我們也可以對其進行設置。比如下方是 Ant Design 的 font-family 字體設置。

其中最后的幾個 Emoji 就是代表了表情字體，以便不同的系統進行合理調用。下面一起簡單看下它們都代表什么。

1. Apple Color Emoji

蘋果產品的文字表情，在 Mac 和 iOS 系統中到處都可以看到，也是我們接觸的最多的 Emoji 表情。

2. Segoe UI Emoji

Windows 10 系統中的 Emoji 表情，黑描邊風格，感覺沒有蘋果的圓潤和質感。

3. Noto Color Emoji

Google 推出的表情，和蘋果的較為類似，更加扁平。

這些 Emoji 表情在工作中應用很廣泛，除了能給頁面添彩，提升用戶體驗之外，更重要的是不用進行額外的切圖即可實現基礎的圖片效果。比如 GitHub 上的很多項目都在描述中使用了 Emoji。

總結

以上就是 font-family 中的常用屬性，推薦排序：

font-family: 
"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB"
"Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

在不同的走查流程中，文字走查是非常重要且容易忽略的一個步驟，了解 font-family，對字體種類把控好，是非常有必要的。以下是小編推薦的簡單走查流程，設計師不要忽略了哦~

對于文字，如果使用的是 Windows 系統，那么網頁就會依次檢查電腦中的字體，英文沒有 Helvetica，就選 Arial。中文沒有 PingFang SC，就選 Microsoft YaHei。當以上字體都找不到時，就調用 sans-serif 無襯線字體作為兜底策略。

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

拓展閱讀：

歡迎關注「58UXD」的微信公眾號：