如何優雅的選擇字型(font-family)

基礎知識

serif和sans-serif字型之間的差別

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

襯線字型，意思是在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。

無襯線體是無襯線字型，沒有這些額外的裝飾，而且筆畫的粗細差不多。

在計算機螢幕上，sans-serif字型被認為是比serif字型容易閱讀。

字型系列

ont-family 屬性設定文本的字型系列。

font-family 屬性應該設定幾個字型名稱作為一種"後備"機制，如果浏覽器不支援第一種字型，他将嘗試下一種字型。

注意:

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

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

中文字型名稱為了保證相容性也會添加引号，如：

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

一、各平台的預設字型情況

1、Window下：

• 宋體（SimSun）：Win下大部分遊覽器的預設字型，

  宋體

  在小字号下（如12px、14px）的顯示效果還可以接受，但是字号一大就非常糟糕了，是以使用的時候要注意。
• 微軟雅黑（"Microsoft Yahei"）：從 Vista 開始，微軟提供了這款新的字型，一款無襯線的黑體類字型，并且擁有 Regular、Bold 兩種粗細的字重，顯著提高了字型的顯示效果。現在這款字型已經成為Windows遊覽器中最值得使用的中文字型。從Win8開始，

  微軟雅黑

  又加入了 Light 這款更細的字重，對于喜歡細字型的設計、開發人員又多了一個新的選擇。
• Arial：Win平台上預設的無襯線西文字型（為什麼要說英文字型後面會解釋），有多種變體，顯示效果一般。
• Tahoma：十分常見的無襯線字型，被采用為Windows 2000、Windows XP、Windows Server 2003及Sega遊戲主機Dreamcast等系統的預設字型，顯示效果比

  Arial

  要好。
• Verdana：無襯線字型，優點在于它在小字上仍結構清晰端整、閱讀辨識容易。
• 其他：Windows 下預設字型清單：微軟官網、維基百科、Office字型
• 結論：

  微軟雅黑

  為Win平台上最值得選擇的中文字型，但非遊覽器預設，需要設定；西文字型的選擇以

  Arial

  、

  Tahoma

  等無襯線字型為主。

2、Mac OS下：

• 華文黑體（STHeiti）、華文細黑（STXihei）：屬于同一字型家族系列，OS X 10.6 之前的簡體中文系統界面預設字型，也是目前Chrome遊覽器下的預設字型，有 Regular 和 Bold 兩個字重，顯示效果可以接受，

  華文細黑

  也曾是我最喜歡的字型之一。
• 黑體-簡（Heiti SC）：從 10.6 開始，

  黑體-簡

  代替

  華文黑體

  用作簡體中文系統界面預設字型，蘋果生态最常用的字型之一，包括iPhone、iPad等裝置用的也是這款字型，顯示效果不錯，但是喇叭口設計遭人诟病。
• 冬青黑體（ Hiragino Sans GB ）：聽說又叫

  蘋果麗黑

  ，日文字型

  Hiragino KakuGothic

  的簡體中文版，簡體中文有 正常體 和 粗體 兩種，

  冬青黑體

  是一款清新的專業印刷字型，小字号時足夠清晰，擁有很多人的追捧。
• Times New Roman：Mac平台Safari下預設的字型，是最常見且廣為人知的西文襯線字型之一，衆多網頁浏覽器和文字處理軟體都是用它作為預設字型。
• Helvetica、Helvetica Neue：一種被廣泛使用的傳奇般的西文字型（這貨還有專門的記錄片呢），在微軟使用山寨貨的

  Arial

  時，喬布斯卻花費重金獲得了

  Helvetica

  蘋果系統上的使用權，是以該字型也一直伴随着蘋果使用者，是蘋果生态中最常用的西文字型。

  Helvetica Neue

  為

  Helvetica

  的改善版本，且增加了更多不同粗細與寬度的字形，共擁有51種字型版本，極大的滿足了日常的使用。
• 蘋方（PingFang SC）：在Mac OS X EL Capitan上，蘋果為中國使用者打造了一款全新中文字型--

  蘋方

  ，去掉了為人诟病的喇叭口，整體造型看上去更加簡潔，字族共六枚字型：極細體、纖細體、細體、正常體、中黑體、中粗體。
• San Francisco：同樣是Mac OS X EL Capitan上最新釋出的西文字型，感覺和

  Helvetica

  看上去差别不大，目前已經應用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系統上。
• 其他：Mac下預設字型清單：蘋果官網、維基百科
• 結論：目前

  蘋方

  和

  San Francisco

  為蘋果推出的最新字型，顯示效果也最為優雅，但隻有最新系統才能支援，而

  黑體-簡

  Helvetica

  可以獲得更多系統版本支援，顯示效果也相差無幾，可以接受。

3、Android系統：

• Droid Sans、Droid Sans Fallback：

  Droid Sans

  為安卓系統中預設的西文字型，是一款人文主義無襯線字型，而

  Droid Sans Fallback

  則是包含漢字、日文假名、韓文的文字擴充支援。

• Droid Sans

  為預設的字型，并結合了中英文，無需單獨設定。

4、iOS系統：

• iOS系統的字型和Mac OS系統的字型相同，保證了Mac上的字型效果，iOS裝置就沒有太大問題。

5、Linux：

• 文泉驿點陣宋體：類似

  宋體

  的襯線字型，一般不推薦使用。
• 文泉驿微米黑：幾乎是 Linux 社群現有的最佳簡體中文字型。

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

1、使用英文名

常看到​

​宋體​

​、​

​微軟雅黑​

​這樣的字型名稱，但這并不是字型檔案的名稱，一般字型檔案都是用英文命名的，如​

​SimSun​

​Microsoft Yahei​

​。

在大多數情況下直接使用名稱也能正确顯示，但是有一些使用者的特殊設定會導緻中文聲明無效。

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

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

2、聲明英文字型

絕大部分中文字型裡都包含英文字母和數字，但是都不是特别漂亮，是以建議也對英文字型進行聲明。

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

是以優先使用最優秀的英文字型，中文字型聲明則緊随其次。如下示例：

font-family: Arial, "Microsoft YaHei";      

3、照顧不同的作業系統

• 英文、數字部分：在預設的作業系統中，Mac和Win都會帶有​

  ​Arial​

  ​, ​

  ​Verdana​

  ​Tahoma​

  ​等幾個預裝字型，從顯示效果來看，​

  ​Tahoma​

  ​要比​

  ​Arial​

  ​更加清晰一些，是以字型設定​

  ​Tahoma​

  ​最好放到前面，當找不到​

  ​Tahoma​

  ​時再使用​

  ​Arial​

  ​；而在Mac中，還擁有一款更加漂亮的​

  ​Helvetica​

  ​字型，是以為了照顧Mac使用者有更好的體驗，應該更優先設定​

  ​Helvetica​

  ​字型；Android系統下預設的無襯線字型就可以接受，是以無需單獨設定。

font-family: Helvetica, Tahoma, Arial;      

• 中文部分：在Win下，​

  ​微軟雅黑​

  ​為大部分人最常使用的中文字型，由于很多人安裝Office的緣故，Mac電腦中也會出現微軟雅黑字型，是以把顯示效果不錯的​

  ​微軟雅黑​

  ​加入到字型清單是個不錯的選擇；同樣，為了保證Mac中更為優雅字型​

  ​蘋方（PingFang SC）​

  ​黑體-簡（Heiti SC）​

  ​冬青黑體（ Hiragino Sans GB ）​

  ​的優先顯示，需要把這些字型放到中文字型清單的最前面；同時為了照顧到Linux作業系統的體驗，還需要添加​

  ​文泉驿微米黑​

  ​字型。

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、注意向下相容性

如果還需要考慮舊版本作業系統使用者的話，不得不加上一些舊版作業系統存在的字型：Mac中的​

​華文黑體​

​冬青黑體​

​，Win中的​

​黑體​

​等。同樣按照顯示效果排列在清單後面，寫法如下：

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

加入了​

​ STXihei（華文細黑）​

​和​

​ SimHei（黑體）​

5、補充字型族名稱

字型族大體上分為兩類：​

​sans-serif（無襯線體）​

​serif（襯線體）​

​，當所有的字型都找不到時，我們可以使用字型族名稱作為作業系統最後選擇字型的方向。一般非襯線字型在顯示器中的顯示效果會比較好，是以我們需要在最後添加​

​ sans-serif ​

​，寫法如下：

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

三、最後

推薦，個人的常用寫法：

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

參考連結：

​

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

個性簽名：時間會解決一切