h5開發(fā)中，老板嫌數(shù)字的字體太丑要使用無襯線字體，自己真一臉懵逼啊，百度了發(fā)現(xiàn)這篇文章很不錯還不了解的同學可以參考下。
小小的字體其實有大大的學問，可能與字體相關(guān)的很多知識都偏設(shè)計，不過俗話說技多不壓身，藝高人膽大，多了解了解總歸沒錯。
就 Web 常用的一些字體而言，經(jīng)常聽說的字體類型，大致可以分為這幾種：
serif(襯線)
sans-serif(無襯線)
monospace(等寬)
fantasy(夢幻)
cuisive(草體)
其實大體上分為襯線字體和無襯線字體，等寬字體中也有襯線等寬和無襯線等寬字體，這 5 個分類是 font-family 的 5 個可用字體系列取值。
也就是說，上述 5 個名字，代表的并非某個特定字體，而是一系列字體，這些通用的名稱允許用戶代理（通常就是瀏覽器）從相應(yīng)集合中選擇一款字體。
這也很好解釋了，font-family 中的 family ，家庭的意思，也就是不單單指一個，而是可以指定多個，上述 5 個英文單詞都是 font-family 的可用取值，下文還會詳細講到。
下面詳細了解一下每類字體。（本來每一個字體都有貼示意圖的，無奈博客園擺出來太影響美觀，可以移步我的Github閱讀）
serif -- 襯線字體
serif，意為有襯線的字體，襯線的意思是在字符筆畫末端有叫做襯線的小細節(jié)的額外裝飾，而且筆畫的粗細會有所不同，這些細節(jié)在大寫字母中特別明顯。
OK，那么有哪些常用字體屬于襯線字體呢？
宋體（SimSun）
Windows 下大部分瀏覽器的默認中文字體，是為適應(yīng)印刷術(shù)而出現(xiàn)的一種漢字字體。筆畫有粗細變化，是一種襯線字體，宋體在小字號下的顯示效果還可以接受，但是字號一大體驗就很差了，所以使用的時候要注意，不建議做標題字體使用。
Times New Roman
Mac 平臺 Safari 下默認的英文字體，是最常見且廣為人知的西文襯線字體之一，眾多網(wǎng)頁瀏覽器和文字處理軟件都是用它作為默認字體。
sans-serif -- 無襯線字體
sans 的意思是無，sans-serif 也就是無襯線的意思。專指西文中沒有襯線的字體，與漢字字體中的黑體相對應(yīng)。與襯線字體相反，該類字體通常是機械的和統(tǒng)一線條的，它們往往擁有相同的曲率，筆直的線條，銳利的轉(zhuǎn)角。
中文下，無襯線字體就是黑體，黑體字也就是又稱方體或等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細。
看看又有哪些常見的無襯線字體。
微軟雅黑（Microsoft Yahei）
大名鼎鼎的微軟雅黑相信都不陌生，從 windows Vista 開始，微軟提供了這款新的字體，一款無襯線的黑體類字體，顯著提高了字體的顯示效果。現(xiàn)在這款字體已經(jīng)成為 windows 瀏覽器最值得使用的中文字體。
華文黑體（STHeiti）、華文細黑（STXihei）
屬于同一字體家族系列，MAC OS X 10.6 之前的簡體中文系統(tǒng)界面的默認中文字體，正常粗細就是華文細黑，粗體下則是華文黑體。
黑體-簡（Heiti SC）
從 MAC OS X 10.6 開始，黑體-簡代替華文黑體用作簡體中文系統(tǒng)界面默認字體，蘋果生態(tài)最常用的字體之一，包括 iPhone、iPad 等設(shè)備用的也是這款字體。
冬青黑體（Hiragino Sans GB）
又叫蘋果麗黑，Hiragino 是字游工房設(shè)計的系列字體名稱。是一款清新的專業(yè)印刷字體，小字號時足夠清晰，Mac OS X 10.6 開始自帶有 W3 和 W6 。
Helvetica、Helvetica Neue
被廣泛用于全世界使用拉丁字母和西里爾字母的國家。Helvetica 是蘋果電腦的默認字體，微軟常用的Arial 字體也來自于它。
Arial
Windows 平臺上默認的無襯線西文字體，有多種變體，比例及字重（weight）和 Helvetica 極為相近。
Verdana
無襯線字體，優(yōu)點在于它在小字上仍結(jié)構(gòu)清晰端整、閱讀辨識容易。
Tahoma
十分常見的無襯線字體，字體結(jié)構(gòu)和 Verdana 很相似，其字元間距較小，而且對 Unicode 字集的支持范圍較大。許多不喜歡 Arial 字體的人常常會改用 Tahoma 來代替，除了是因為 Tahoma 很容易取得之外，也是因為 Tahoma 沒有一些 Arial 為人詬病的缺點，例如大寫“i”與小寫“L”難以分辨等。（這里故意反過來寫）。
monospace -- 等寬字體
這系列字體程序員們其實都不陌生。我們用來敲代碼的編輯器，字體的選擇經(jīng)常就是一類等寬字體。
等寬字體是指字符寬度相同的電腦字體，常見于 IDE 或者編輯器中，每個字母的寬度相等，通常用于計算機相關(guān)書籍中排版代碼塊。
除了 IDE ，我們看到的技術(shù)文章中的代碼塊中，經(jīng)常也是使用等寬字體進行排版。
Consolas
這是一套等寬的字體，屬無襯線字體。這個字體使用了微軟的 ClearType 字型平滑技術(shù)，主要是設(shè)計做為代碼的顯示字型之用，特別之處是它的“0”字加入了一斜撇，以方便與字母“O”分辨。
ClearType：由微軟在其操作系統(tǒng)中提供的屏幕亞像素微調(diào)字體平滑工具，讓 Windows 字體更加漂亮。在 Windows XP 平臺上，這項技術(shù)默認是關(guān)閉，到了Windows Vista 才默認為開啟。
上圖是 Github 代碼區(qū)塊的字體設(shè)置，可以看到，默認字體就是 Consolas ，緊接著的幾個都是其它等寬字體，如果用戶的系統(tǒng)中都沒有預(yù)裝這些字體，則會匹配最后一個 monospace ，它表示等寬字體系列，會從用戶系統(tǒng)中的等寬字體中選取一個展示。
antasy 、cuisive
fantasy和 cuisive 字體在瀏覽器中不常用，在各個瀏覽器中有明顯的差異。
中文字體的兼容寫法
一些中文字體，例如font-family: '宋體'，由于字符編碼的問題，少部分瀏覽器解釋這個代碼的時候，中文出現(xiàn)亂碼，這個時候設(shè)定的字體無法正常顯示。
所以通常會轉(zhuǎn)化成對應(yīng)的英文寫法或者是對應(yīng)的 unicode 編碼，font-family:'宋體' -> font-family: '\5b8b\4f53'。
\5b8b\4f53 是宋體兩個中文字的 unicode 編碼表示。類似的寫法還有
黑體：\9ED1\4F53
微軟雅黑：\5FAE\8F6F\96C5\9ED1
華文細黑：\534E\6587\7EC6\9ED1
華文黑體：\534E\6587\9ED1\4F53
字體定義的細節(jié)
其他一些小細節(jié)也很重要，譬如定義字體的時候，何時需要在字體兩端添加引號？像這樣：
p{
font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53';
}
當字體名字中間有空格，中文名字體及 Unicode 字符編碼表示的中文字體，為了保證兼容性，都建議在字體兩端添加單引號或者雙引號。
字體定義順序
body {
font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
使用 tahoma 作為首選的西文字體，小字號下結(jié)構(gòu)清晰端整、閱讀辨識容易；
用戶電腦未預(yù)裝 tohoma，則選擇 arial 作為替代的西文字體，覆蓋 windows 和 MAC OS；
Hiragino Sans GB 為冬青黑體，首選的中文字體，保證了 MAC 用戶的觀看體驗；
Windows 下沒有預(yù)裝冬青黑體，則使用 '\5b8b\4f53' 宋體為替代的中文字體方案，小字號下有著不錯的效果；
最后使用無襯線系列字體 sans-serif 結(jié)尾，保證舊版本操作系統(tǒng)用戶能選中一款電腦預(yù)裝的無襯線字體，向下兼容。
嗯，其實上面的 font-family 就是淘寶首頁 body 的字體定義，非常的規(guī)范，每一個字體的定義都有它的意義。
字體書寫規(guī)則
綜上，總結(jié)一下，我覺得字體 font-family 定義的原則大概遵循：
1、兼顧中西
中文或者西文（英文）都要考慮到。
2、西文在前，中文在后
由于大部分中文字體也是帶有英文部分的，但是英文部分又不怎么好看，同理英文字體中大多不包含中文。
所以通常會先進行英文字體的聲明，選擇最優(yōu)的英文字體，這樣不會影響到中文字體的選擇，中文字體聲明則緊隨其次。
3、兼顧多操作系統(tǒng)
選擇字體的時候要考慮多操作系統(tǒng)。例如 MAC OS 下的很多中文字體在 Windows 都沒有預(yù)裝，為了保證 MAC 用戶的體驗，在定義中文字體的時候，先定義 MAC 用戶的中文字體，再定義 Windows 用戶的中文字體。其次很多人都不知道 Android 下沒有預(yù)裝微軟雅黑和宋體，那么 Android 機型下的中文字體設(shè)置又是很考究的。
4、兼顧舊操作系統(tǒng)，以字體族系列 serif 和 sans-serif 結(jié)尾
當使用一些非常新的字體時，要考慮向下兼容，兼顧到一些極舊的操作系統(tǒng)，使用字體族系列 serif 和sans-serif 結(jié)尾總歸是不錯的選擇。
