基礎(chǔ)知識

serif和sans-serif字體之間的區(qū)別

西文字體分為兩大族：襯線體（serif）和無襯線體（sans-serif）。像Times、Times New Roman等都是屬于襯線體，而Arial、helvetica則是屬于無襯線體。

襯線字體，意思是在字的筆畫開始、結(jié)束的地方有額外的裝飾，而且筆畫的粗細(xì)會有所不同。
無襯線體是無襯線字體，沒有這些額外的裝飾，而且筆畫的粗細(xì)差不多。

在計(jì)算機(jī)屏幕上，sans-serif字體被認(rèn)為是比serif字體容易閱讀。

字體系列

ont-family 屬性設(shè)置文本的字體系列。

font-family 屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。

注意:

名稱包含空格，則需要用雙引號或單引號表示，如：

font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;

中文字體名稱為了保證兼容性也會添加引號，如：

font-family: "黑體-簡", "微軟雅黑", "文泉驛微米黑";

一、各平臺的默認(rèn)字體情況

1、Window下：

宋體（SimSun）：Win下大部分游覽器的默認(rèn)字體，宋體在小字號下（如12px、14px）的顯示效果還可以接受，但是字號一大就非常糟糕了，所以使用的時(shí)候要注意。

微軟雅黑（"Microsoft Yahei"）：從 Vista 開始，微軟提供了這款新的字體，一款無襯線的黑體類字體，并且擁有Regular、Bold兩種粗細(xì)的字重，顯著提高了字體的顯示效果。現(xiàn)在這款字體已經(jīng)成為Windows游覽器中最值得使用的中文字體。從Win8開始，微軟雅黑又加入了Light這款更細(xì)的字重，對于喜歡細(xì)字體的設(shè)計(jì)、開發(fā)人員又多了一個(gè)新的選擇。

Arial：Win平臺上默認(rèn)的無襯線西文字體（為什么要說英文字體后面會解釋），有多種變體，顯示效果一般。

Tahoma：十分常見的無襯線字體，被采用為Windows 2000、Windows XP、Windows Server 2003及Sega游戲主機(jī)Dreamcast等系統(tǒng)的預(yù)設(shè)字型，顯示效果比Arial要好。

Verdana：無襯線字體，優(yōu)點(diǎn)在于它在小字上仍結(jié)構(gòu)清晰端整、閱讀辨識容易。

其他：Windows 下默認(rèn)字體列表：微軟官網(wǎng)、維基百科、Office字體

結(jié)論：微軟雅黑為Win平臺上最值得選擇的中文字體，但非游覽器默認(rèn)，需要設(shè)置；西文字體的選擇以Arial、Tahoma等無襯線字體為主。

2、Mac OS下：

華文黑體（STHeiti）、華文細(xì)黑（STXihei）：屬于同一字體家族系列，OS X 10.6 之前的簡體中文系統(tǒng)界面默認(rèn)字體，也是目前Chrome游覽器下的默認(rèn)字體，有Regular和Bold兩個(gè)字重，顯示效果可以接受，華文細(xì)黑也曾是我最喜歡的字體之一。

黑體-簡（Heiti SC）：從 10.6 開始，黑體-簡代替華文黑體用作簡體中文系統(tǒng)界面默認(rèn)字體，蘋果生態(tài)最常用的字體之一，包括iPhone、iPad等設(shè)備用的也是這款字體，顯示效果不錯(cuò)，但是喇叭口設(shè)計(jì)遭人詬病。

冬青黑體（ Hiragino Sans GB ）：聽說又叫蘋果麗黑，日文字體Hiragino KakuGothic的簡體中文版，簡體中文有常規(guī)體和粗體兩種，冬青黑體是一款清新的專業(yè)印刷字體，小字號時(shí)足夠清晰，擁有很多人的追捧。

Times New Roman：Mac平臺Safari下默認(rèn)的字體，是最常見且廣為人知的西文襯線字體之一，眾多網(wǎng)頁瀏覽器和文字處理軟件都是用它作為默認(rèn)字體。

Helvetica、Helvetica Neue：一種被廣泛使用的傳奇般的西文字體（這貨還有專門的記錄片呢），在微軟使用山寨貨的Arial時(shí)，喬布斯卻花費(fèi)重金獲得了Helvetica蘋果系統(tǒng)上的使用權(quán)，因此該字體也一直伴隨著蘋果用戶，是蘋果生態(tài)中最常用的西文字體。Helvetica Neue為Helvetica的改善版本，且增加了更多不同粗細(xì)與寬度的字形，共擁有51種字體版本，極大的滿足了日常的使用。

蘋方（PingFang SC）：在Mac OS X EL Capitan上，蘋果為中國用戶打造了一款全新中文字體--蘋方，去掉了為人詬病的喇叭口，整體造型看上去更加簡潔，字族共六枚字體：極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體。

San Francisco：同樣是Mac OS X EL Capitan上最新發(fā)布的西文字體，感覺和Helvetica看上去差別不大，目前已經(jīng)應(yīng)用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系統(tǒng)上。

其他：Mac下默認(rèn)字體列表：蘋果官網(wǎng)、維基百科

結(jié)論：目前蘋方和San Francisco為蘋果推出的最新字體，顯示效果也最為優(yōu)雅，但只有最新系統(tǒng)才能支持，而黑體-簡和Helvetica可以獲得更多系統(tǒng)版本支持，顯示效果也相差無幾，可以接受。

3、Android系統(tǒng)：

Droid Sans、Droid Sans Fallback：Droid Sans為安卓系統(tǒng)中默認(rèn)的西文字體，是一款人文主義無襯線字體，而Droid Sans Fallback則是包含漢字、日文假名、韓文的文字?jǐn)U展支持。

結(jié)論：Droid Sans為默認(rèn)的字體，并結(jié)合了中英文，無需單獨(dú)設(shè)置。

4、iOS系統(tǒng)：

iOS系統(tǒng)的字體和Mac OS系統(tǒng)的字體相同，保證了Mac上的字體效果，iOS設(shè)備就沒有太大問題。

5、Linux：

文泉驛點(diǎn)陣宋體：類似宋體的襯線字體，一般不推薦使用。

文泉驛微米黑：幾乎是 Linux 社區(qū)現(xiàn)有的最佳簡體中文字體。

二、選擇字體需要注意的問題

1、使用英文名

常看到宋體、微軟雅黑這樣的字體名稱，但這并不是字體文件的名稱，一般字體文件都是用英文命名的，如SimSun、Microsoft Yahei。

在大多數(shù)情況下直接使用名稱也能正確顯示，但是有一些用戶的特殊設(shè)置會導(dǎo)致中文聲明無效。

因此，保守的做法是使用英文名稱或者兩者兼寫。如下示例：

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑";

2、聲明英文字體

絕大部分中文字體里都包含英文字母和數(shù)字，但是都不是特別漂亮，所以建議也對英文字體進(jìn)行聲明。

由于英文字體中大多不包含中文，我們可以先進(jìn)行英文字體的聲明，這樣不會影響到中文字體的選擇。

因此優(yōu)先使用最優(yōu)秀的英文字體，中文字體聲明則緊隨其次。如下示例：

font-family: Arial, "Microsoft YaHei";

3、照顧不同的操作系統(tǒng)

英文、數(shù)字部分：在默認(rèn)的操作系統(tǒng)中，Mac和Win都會帶有Arial,Verdana,Tahoma等幾個(gè)預(yù)裝字體，從顯示效果來看，Tahoma要比Arial更加清晰一些，因此字體設(shè)置Tahoma最好放到前面，當(dāng)找不到Tahoma時(shí)再使用Arial；而在Mac中，還擁有一款更加漂亮的Helvetica字體，所以為了照顧Mac用戶有更好的體驗(yàn)，應(yīng)該更優(yōu)先設(shè)置Helvetica字體；Android系統(tǒng)下默認(rèn)的無襯線字體就可以接受，因此無需單獨(dú)設(shè)置。

font-family: Helvetica, Tahoma, Arial;

中文部分：在Win下，微軟雅黑為大部分人最常使用的中文字體，由于很多人安裝Office的緣故，Mac電腦中也會出現(xiàn)微軟雅黑字體，因此把顯示效果不錯(cuò)的微軟雅黑加入到字體列表是個(gè)不錯(cuò)的選擇；同樣，為了保證Mac中更為優(yōu)雅字體蘋方（PingFang SC）、黑體-簡（Heiti SC）、冬青黑體（ Hiragino Sans GB ）的優(yōu)先顯示，需要把這些字體放到中文字體列表的最前面；同時(shí)為了照顧到Linux操作系統(tǒng)的體驗(yàn)，還需要添加文泉驛微米黑字體。

font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

中英文整合寫法：

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

4、注意向下兼容性

如果還需要考慮舊版本操作系統(tǒng)用戶的話，不得不加上一些舊版操作系統(tǒng)存在的字體：Mac中的華文黑體、冬青黑體，Win中的黑體等。同樣按照顯示效果排列在列表后面，寫法如下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

加入了STXihei（華文細(xì)黑）和SimHei（黑體）。

5、補(bǔ)充字體族名稱

字體族大體上分為兩類：sans-serif（無襯線體）和serif（襯線體），當(dāng)所有的字體都找不到時(shí)，我們可以使用字體族名稱作為操作系統(tǒng)最后選擇字體的方向。一般非襯線字體在顯示器中的顯示效果會比較好，因此我們需要在最后添加 sans-serif ，寫法如下：

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

三、最后

推薦，個(gè)人的常用寫法：

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

參考鏈接：

1.https://segmentfault.com/a/1190000006110417

2.https://www.runoob.com/css/css-font.html

總結(jié)

以上是生活随笔為你收集整理的如何优雅的选择字体(font-family)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。