字型的分類

就 Web 常用的一些字型而言，經常聽說的字型型別，大致可以分為這幾種：

serif(襯線)
sans-serif(無襯線)
monospace(等寬)
fantasy(夢幻)
cuisive(草體)

其實大體上分為襯線字型和無襯線字型，等寬字型中也有襯線等寬和無襯線等寬字型，這 5 個分類是 font-family 的 5 個可用字體系列取值。

也就是說，上述 5 個名字，代表的並非某個特定字型，而是一系列字型，這些通用的名稱允許使用者代理（通常就是瀏覽器）從相應集合中選擇一款字型。

這也很好解釋了，font-family 中的 family ，家庭的意思，也就是不單單指一個，而是可以指定多個，上述 5 個英文單詞都是 font-family 的可用取值，下文還會詳細講到。

下面詳細瞭解一下每類字型。

serif – 襯線字型

serif，意為有襯線的字型，襯線的意思是在字元筆畫末端有叫做襯線的小細節的額外裝飾，而且筆畫的粗細會有所不同，這些細節在大寫字母中特別明顯。

OK，那麼有哪些常用字型屬於襯線字型呢？

宋體（SimSun）

Windows 下大部分瀏覽器的預設中文字型，是為適應印刷術而出現的一種漢字字型。筆畫有粗細變化，是一種襯線字型，宋體在小字號下的顯示效果還可以接受，但是字號一大體驗就很差了，所以使用的時候要注意，不建議做標題字型使用。

Times New Roman
Mac 平臺 Safari 下預設的英文字型，是最常見且廣為人知的西文襯線字型之一，眾多網頁瀏覽器和文書處理軟體都是用它作為預設字型。

sans-serif – 無襯線字型

sans 的意思是無，sans-serif 也就是無襯線的意思。專指西文中沒有襯線的字型，與漢字字型中的黑體相對應。與襯線字型相反，該類字型通常是機械的和統一線條的，它們往往擁有相同的曲率，筆直的線條，銳利的轉角。

中文下，無襯線字型就是黑體，黑體字也就是又稱方體或等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細。

看看又有哪些常見的無襯線字型。

微軟雅黑（Microsoft Yahei）

大名鼎鼎的微軟雅黑相信都不陌生，從 windows Vista 開始，微軟提供了這款新的字型，一款無襯線的黑體類字型，顯著提高了字型的顯示效果。現在這款字型已經成為 windows 瀏覽器最值得使用的中文字型。

華文黑體（STHeiti）、華文細黑（STXihei）

屬於同一字型家族系列，MAC OS X 10.6 之前的簡體中文系統介面的預設中文字型，正常粗細就是華文細黑，粗體下則是華文黑體。

黑體-簡（Heiti SC）

從 MAC OS X 10.6 開始，黑體-簡代替華文黑體用作簡體中文系統介面預設字型，蘋果生態最常用的字型之一，包括 iPhone、iPad 等裝置用的也是這款字型。

冬青黑體（Hiragino Sans GB）

又叫蘋果麗黑，Hiragino 是字遊工房設計的系列字型名稱。是一款清新的專業印刷字型，小字號時足夠清晰，Mac OS X 10.6 開始自帶有 W3 和 W6 。

Helvetica、Helvetica Neue

被廣泛用於全世界使用拉丁字母和西裡爾字母的國家。Helvetica 是蘋果電腦的預設字型，微軟常用的Arial 字型也來自於它。

Arial

Windows 平臺上預設的無襯線西文字型，有多種變體，比例及字重（weight）和 Helvetica 極為相近。

Verdana

無襯線字型，優點在於它在小字上仍結構清晰端整、閱讀辨識容易。

Tahoma

十分常見的無襯線字型，字型結構和 Verdana 很相似，其字元間距較小，而且對 Unicode 字集的支援範圍較大。許多不喜歡 Arial 字型的人常常會改用 Tahoma 來代替，除了是因為 Tahoma 很容易取得之外，也是因為 Tahoma 沒有一些 Arial 為人詬病的缺點，例如大寫“i”與小寫“L”難以分辨等。（這裡故意反過來寫）。

monospace – 等寬字型

這系列字型程式設計師們其實都不陌生。我們用來敲程式碼的編輯器，字型的選擇經常就是一類等寬字型。

等寬字型是指字元寬度相同的電腦字型，常見於 IDE 或者編輯器中，每個字母的寬度相等，通常用於計算機相關書籍中排版程式碼塊。

除了 IDE ，我們看到的技術文章中的程式碼塊中，經常也是使用等寬字型進行排版。

Consolas

這是一套等寬的字型，屬無襯線字型。這個字型使用了微軟的 ClearType 字型平滑技術，主要是設計做為程式碼的顯示字型之用，特別之處是它的“0”字加入了一斜撇，以方便與字母“O”分辨。

ClearType：由微軟在其作業系統中提供的螢幕亞畫素微調字型平滑工具，讓 Windows 字型更加漂亮。在 Windows XP 平臺上，這項技術預設是關閉，到了Windows Vista 才預設為開啟。

上圖是 Github 程式碼區塊的字型設定，可以看到，預設字型就是 Consolas ，緊接著的幾個都是其它等寬字型，如果使用者的系統中都沒有預裝這些字型，則會匹配最後一個 monospace ，它表示等寬字體系列，會從使用者系統中的等寬字型中選取一個展示。

fantasy 、cuisive

fantasy和 cuisive 字型在瀏覽器中不常用，在各個瀏覽器中有明顯的差異。

中文字型的相容寫法

一些中文字型，例如font-family: ‘宋體’，由於字元編碼的問題，少部分瀏覽器解釋這個程式碼的時候，中文出現亂碼，這個時候設定的字型無法正常顯示。

所以通常會轉化成對應的英文寫法或者是對應的 unicode 編碼，font-family:‘宋體’ -> font-family: ‘\5b8b\4f53’。

\5b8b\4f53 是宋體兩個中文字的 unicode 編碼表示。類似的寫法還有：

黑體：\9ED1\4F53
微軟雅黑：\5FAE\8F6F\96C5\9ED1
華文細黑：\534E\6587\7EC6\9ED1
華文黑體：\534E\6587\9ED1\4F53

Unicode編碼： 人們希望在一套系統裡面能夠容納所有字元，Unicode 編碼解決傳統的字元編碼方案的侷限性，每個字元佔用 2 位元組。這樣理論上一共最多可以表示2^16（即65536）個字元。基本滿足各種語言的使用。

字型定義的細節

其他一些小細節也很重要，譬如定義字型的時候，何時需要在字型兩端新增引號？像這樣：

p{
    font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53';
}

當字型名字中間有空格，中文名字型及 Unicode 字元編碼表示的中文字型，為了保證相容性，都建議在字型兩端新增單引號或者雙引號。

字型定義順序

字型定義順序是一門學問，通常而言，我們定義字型的時候，會定義多個字型或字體系列。舉個例子：

body {
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

別看短短 5 個字型名，其實其中門道很深。解釋一下：

使用 tahoma 作為首選的西文字型，小字號下結構清晰端整、閱讀辨識容易；
使用者電腦未預裝 tohoma，則選擇 arial 作為替代的西文字型，覆蓋 windows 和 MAC OS；
Hiragino Sans GB 為冬青黑體，首選的中文字型，保證了 MAC 使用者的觀看體驗；
Windows 下沒有預裝冬青黑體，則使用 ‘\5b8b\4f53’ 宋體為替代的中文字型方案，小字號下有著不錯的效果；

最後使用無襯線系列字型 sans-serif 結尾，保證舊版本作業系統使用者能選中一款電腦預裝的無襯線字型，向下相容。

嗯，其實上面的 font-family 就是淘寶首頁 body 的字型定義，非常的規範，每一個字型的定義都有它的意義。

字型書寫規則

綜上，總結一下，我覺得字型 font-family 定義的原則大概遵循：

1、兼顧中西

中文或者西文（英文）都要考慮到。

2、西文在前，中文在後

由於大部分中文字型也是帶有英文部分的，但是英文部分又不怎麼好看，同理英文字型中大多不包含中文。

所以通常會先進行英文字型的宣告，選擇最優的英文字型，這樣不會影響到中文字型的選擇，中文字型宣告則緊隨其次。

3、兼顧多作業系統

選擇字型的時候要考慮多作業系統。例如 MAC OS 下的很多中文字型在 Windows 都沒有預裝，為了保證 MAC 使用者的體驗，在定義中文字型的時候，先定義 MAC 使用者的中文字型，再定義 Windows 使用者的中文字型。其次很多人都不知道 Android 下沒有預裝微軟雅黑和宋體，那麼 Android 機型下的中文字型設定又是很考究的。

4、兼顧舊作業系統，以字型族系列 serif 和 sans-serif 結尾

當使用一些非常新的字型時，要考慮向下相容，兼顧到一些極舊的作業系統，使用字型族系列 serif 和sans-serif 結尾總歸是不錯的選擇。

這裡推薦一下我的前端技術分享群：731771211，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選：加入