小小的字型其實有大大的學問，可能與字型相關的很多知識都偏設計，不過俗話說技多不壓身，藝高人膽大，多瞭解瞭解總歸沒錯。
字型的分類
就 Web 常用的一些字型而言，經常聽說的字型型別，大致可以分為這幾種：
- serif(襯線)
- sans-serif(無襯線)
- monospace(等寬)
- fantasy(夢幻)
- cuisive(草體)
其實大體上分為襯線字型和無襯線字型，等寬字型中也有襯線等寬和無襯線等寬字型，這 5 個分類是 font-family 的 5 個可用字型系列取值。
也就是說，上述 5 個名字，代表的並非某個特定字型，而是一系列字型，這些通用的名稱允許使用者代理（通常就是瀏覽器）從相應集合中選擇一款字型。
這也很好解釋了，font-family 中的 family ，家庭的意思，也就是不單單指一個，而是可以指定多個，上述 5 個英文單詞都是 font-family 的可用取值，下文還會詳細講到。
下面詳細瞭解一下每類字型。（本來每一個字型都有貼示意圖的，無奈部落格園擺出來太影響美觀，可以移步我的Github閱讀）
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）個字元。基本滿足各種語言的使用。
字型定義的細節
其他一些小細節也很重要，譬如定義字型的時候，何時需要在字型兩端新增引號？像這樣：
|
1 2 3 |
p{ font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53'; } |
當字型名字中間有空格，中文名字型及 Unicode 字元編碼表示的中文字型，為了保證相容性，都建議在字型兩端新增單引號或者雙引號。
字型定義順序
字型定義順序是一門學問，通常而言，我們定義字型的時候，會定義多個字型或字型系列。舉個例子：
|
1 2 3 |
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 使用者的中文字型；
4、兼顧舊作業系統，以字型族系列 serif 和 sans-serif 結尾
當使用一些非常新的字型時，要考慮向下相容，兼顧到一些極舊的作業系統，使用字型族系列 serif 和sans-serif 結尾總歸是不錯的選擇。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
開本系列，談談一些有趣的 CSS 題目，題目型別天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
所有題目彙總在我的 Github 。
- 有趣的CSS題目（1）： 左邊豎條的實現方法
- 有趣的CSS題目（2）： 從條紋邊框的實現談盒子模型
- 有趣的CSS題目（3）： 層疊順序與堆疊上下文知多少
- 有趣的CSS題目（4）： 從倒影說起，談談 CSS 繼承 inherit
- 有趣的CSS題目（5）： 單行居中，兩行居左，超過兩行省略
- 有趣的CSS題目（6）： 全相容的多列均勻佈局問題
- 有趣的CSS題目（7）：消失的邊界線問題
- 有趣的CSS題目（8）：純CSS的導航欄Tab切換方案
- 有趣的CSS題目（9）：巧妙實現 CSS 斜線
- 有趣的CSS題目（10）：結構性偽類選擇器
- 有趣的CSS題目（11）：reset.css 知多少？
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
