h5開發中，老板嫌數字的字體太丑要使用無襯線字體，自己真一臉懵逼啊，百度了發現這篇文章很不錯還不了解的同學可以參考下。
小小的字體其實有大大的學問，可能與字體相關的很多知識都偏設計，不過俗話說技多不壓身，藝高人膽大，多了解了解總歸沒錯。
就 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 ，它表示等寬字體系列，會從用戶系統中的等寬字體中選取一個展示。
antasy 、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
字體定義的細節
其他一些小細節也很重要，譬如定義字體的時候，何時需要在字體兩端添加引號？像這樣：
p{
font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53';
}
當字體名字中間有空格，中文名字體及 Unicode 字符編碼表示的中文字體，為了保證兼容性，都建議在字體兩端添加單引號或者雙引號。
字體定義順序
body {
font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
使用 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 結尾總歸是不錯的選擇。
