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

01

走查中的問題

UI設(shè)計師在一個網(wǎng)頁項目中需要做哪些工作？

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

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

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

設(shè)計師：大神，PC端的UI稿確定了，趕緊開發(fā)吧

程序員：好的，看我的

……

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

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

程序員：因為……@#￥%……%&……

其實同一個設(shè)計稿在不同系統(tǒng)中顯示的字體可能會不一致，在走查中屬于正常現(xiàn)象，并不是技術(shù)同學(xué)疏忽了。這其中的原因就需要我們了解下網(wǎng)頁中的字體。

02

網(wǎng)頁中的蘋方字體

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

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

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

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

03

font-family屬性簡介

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

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

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

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

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

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

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

04

Font-family調(diào)用規(guī)則

和我們設(shè)計師做UI界面類似，font-family也是可以根據(jù)不同網(wǎng)站風(fēng)格和需求設(shè)置不同的字體。

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

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

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

上面font-family屬性中的列出的字體都是網(wǎng)絡(luò)最常用的，當(dāng)然不同項目也可以根據(jù)具體業(yè)務(wù)需求自定義設(shè)置。但是無論怎么設(shè)置都需要遵守以下兩點：

1-由于英文字體中大多不包含中文，需要先對英文字體聲明，這樣不會影響到中文字體的選擇。所以優(yōu)先使用效果最好的英文字體，中文字體聲明則緊隨其次。

2-為了讓Mac系統(tǒng)使用到顯示效果最好的字體，優(yōu)先聲明Mac系統(tǒng)字體。Win系統(tǒng)默認沒有安裝Mac系統(tǒng)字體，因此會延后調(diào)用Arial和微軟雅黑。

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

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

05

常用字體代碼介紹

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

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

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

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

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

· Helvetica   

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

· Helvetica Neue   

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

· Arial 

1982年模仿Helvetica而發(fā)明的英文字體，應(yīng)用很廣，也是Windows系統(tǒng)默認字體。

· PingFang SC

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

· Hiragino Sans GB、Heiti SC

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

· Microsoft YaHei

微軟雅黑，Windows系統(tǒng)默認的中文字體，也是最常見的中文字體。這里需要注意，微軟雅黑是有版權(quán)的。

· WenQuanYi Micro Hei

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

· sans-serif

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

06

Emoji表情字體

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

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

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

· Apple Color Emoji

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

· Segoe UI Emoji

Windows10系統(tǒng)中的Emoji表情，黑描邊風(fēng)格，感覺沒有蘋果的圓潤和質(zhì)感。

· Noto Color Emoji

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

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

07

總結(jié)

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

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

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

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

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