網(wǎng)頁設(shè)計中字體屬性Font-family要如何寫?

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

     


01

                                

走查中的問題


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

 

這是一個沒有固定標(biāo)準(zhǔn)答案的問題,因為不同段位的設(shè)計師、不同類型的項目、不同水平的團(tuán)隊都會面對不一樣的工作挑戰(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)頁信息的重要來源。

 

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

              

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

 

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

 


03

                                

font-family屬性簡介

 

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

 

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


              

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

              

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

 

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

 

我們在走查網(wǎng)頁的時候可以通過檢查網(wǎng)頁元素來看目標(biāo)文字調(diào)用的font-family代碼。比如下方圖片就是一個用Chrome瀏覽器檢查代碼的例子??梢钥吹侥繕?biāo)字體的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)更簡單、理解更容易的例子來說明。比如下方就是一個比較標(biāo)準(zhǔn)的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)默認(rèn)沒有安裝Mac系統(tǒng)字體,因此會延后調(diào)用Arial和微軟雅黑。

 

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

 

好了,我們現(xiàn)在已經(jīng)知道網(wǎng)頁字體在網(wǎng)頁端的CSS調(diào)用方式了,剩下的就需要我們認(rèn)識比較常用的字體名稱。問題來了,以上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)的默認(rèn)無襯線英文字體,充滿了科技感,應(yīng)用范圍很廣泛。于1957年由瑞士字體設(shè)計師設(shè)計。需要注意的是Windows系統(tǒng)默認(rèn)是沒有的。

             

· Helvetica Neue   

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

             

· Arial 

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

       

 

· PingFang SC

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

             

· Hiragino Sans GB、Heiti SC

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

                    

· Microsoft YaHei

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

           

· WenQuanYi Micro Hei

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

             

· sans-serif

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

 


06

                                

Emoji表情字體

 

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

 

             

 

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

              

其中最后的幾個Emoji就是代表了表情字體,以便不同的系統(tǒng)進(jìn)行合理調(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)用很廣泛,除了能給頁面添彩,提升用戶體驗之外,更重要的是不用進(jìn)行額外的切圖即可實現(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)頁界面的視覺兼容性,提升用戶體驗。



每天更新,
全站高品質(zhì)素材免費下載!