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

01

走查中的問(wèn)題

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

這是一個(gè)沒(méi)有固定標(biāo)準(zhǔn)答案的問(wèn)題，因?yàn)椴煌挝坏脑O(shè)計(jì)師、不同類(lèi)型的項(xiàng)目、不同水平的團(tuán)隊(duì)都會(huì)面對(duì)不一樣的工作挑戰(zhàn)。但是總會(huì)有幾項(xiàng)工作是UI設(shè)計(jì)師必須經(jīng)歷的，這其中就包括了頁(yè)面設(shè)計(jì)走查這個(gè)環(huán)節(jié)。

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

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

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

程序員：好的，看我的

……

程序員：走查吧，絕對(duì)沒(méi)問(wèn)題

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

程序員：因?yàn)椤瑻#￥%……%&……

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

02

網(wǎng)頁(yè)中的蘋(píng)方字體

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

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

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

那么為什么會(huì)形成不同的字體呢？Windows中的蘋(píng)方去哪兒了？這一切要從font-family說(shuō)起。

03

font-family屬性簡(jiǎn)介

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

雖然font-family是一個(gè)前端專(zhuān)業(yè)術(shù)語(yǔ)，但是我們?cè)O(shè)計(jì)師在日常工作中其實(shí)也是見(jiàn)過(guò)font-family的。比如藍(lán)湖的右側(cè)標(biāo)注最下方代碼區(qū)就可以看到，其中的文字就使用了蘋(píng)方字體。

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

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

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

我們?cè)谧卟榫W(wǎng)頁(yè)的時(shí)候可以通過(guò)檢查網(wǎng)頁(yè)元素來(lái)看目標(biāo)文字調(diào)用的font-family代碼。比如下方圖片就是一個(gè)用Chrome瀏覽器檢查代碼的例子?？梢钥吹侥繕?biāo)字體的font-family調(diào)用了一大堆字體代碼，其中有些我們并不陌生。

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

04

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

和我們?cè)O(shè)計(jì)師做UI界面類(lèi)似，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)隔開(kāi)，含有空格的要加英文雙引號(hào)。

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

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

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

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

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

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

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

05

常用字體代碼介紹

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

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

我們?cè)倏匆幌虑懊嫣岬降膄ont-family代碼，最后一個(gè)sans-serif就表示無(wú)襯線字體。

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

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

· Helvetica   

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

· Helvetica Neue   

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

· Arial 

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

· PingFang SC

蘋(píng)果專(zhuān)為中國(guó)用戶(hù)打造的中文字體，也是UI設(shè)計(jì)師做界面默認(rèn)使用的字體。另外，和SC同時(shí)出現(xiàn)的還有TC和HK，分別代表簡(jiǎn)體中文、臺(tái)灣繁體和香港繁體。

· Hiragino Sans GB、Heiti SC

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

· Microsoft YaHei

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

· WenQuanYi Micro Hei

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

· sans-serif

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

06

Emoji表情字體

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

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

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

· Apple Color Emoji

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

· Segoe UI Emoji

Windows10系統(tǒng)中的Emoji表情，黑描邊風(fēng)格，感覺(jué)沒(méi)有蘋(píng)果的圓潤(rùn)和質(zhì)感。

· Noto Color Emoji

Google推出的表情，和蘋(píng)果的較為類(lèi)似，更加扁平。

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

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

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

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