Web中常用字型介紹
年末了，任務比較少，經理看我閑着，是不是感覺很不自在啊。遂給我一個任務：調研一下ios和android裝置所支援各種浏覽器支援的字型。一聽“調研”倆字，我就頭大了，我一個小程式員，又不是搞産品的哪幹過這樣的活。好吧，按自己了解的意思來吧。
别看自己一直搞前端，其實連最基礎的字型種類都不知道。研究了一天就發現自己知識開闊了不少。忘了是哪位名人說過一句話了：在一個領域，不管是多麼渺小的事，你堅持10年，你就會成為這方面的專家。不廢話了，現在把自己了解的關于web字型方面的資訊分享給大家。
1、在Web編碼中，CSS預設應用的Web字型是有限的，雖然在新版本的CSS3，我們可以通過新增的@font-face屬性來引入特殊的浏覽器加載字型。
浏覽器中展示網頁文字内容時，文字字型都會按照設計師在css中定義的字型族的順序來進行顯示。什麼是字型族？字型族就是你在css代碼中看到“font-family”的代碼内的一類字型名稱，例如下面這行代碼：
font-family:"Comic Sans MS","幼圓","黑體",sans-serif; 按照W3C标準，浏覽器在解析一行代碼時首先會在系統中查找Comic Sans MS字型，如果系統記憶體在這個字型那麼浏覽器就會使用Comic Sans MS字型，如果沒有的話就接着查找幼圓字型，以此類推直到浏覽器可以表達系統存在的字型為止。
注意了，“sans-serif”不是某個字型的名稱，而是一種在前面叙述的字型都無效時而最終選用的字型，稱為浏覽器通用字型，它取決于你所用的浏覽器預設的通用字型是什麼，可能是“Arial”，也有可能是“Helvetica”。
2、網頁常用字型通常分為5類：serif(襯線)、sans-serif(無襯線)、monospace(等寬)、fantasy(夢幻)、cuisive(草體)，這些通用的名稱允許使用者代理從相應集合中選擇一款字型。
serif 字型在字元筆畫末端有叫做襯線的小細節，這些細節在大寫字母中特别明顯。
sans-serif 字型在字元筆畫末端沒有任何細節，與serif字型相比，他們的外形更簡單。
monospace 字型，每個字母的寬度相等，通常用于計算機相關書籍中排版代碼塊。
fantasy 和 cuisive 字型在浏覽器中不常用，在各個浏覽器中有明顯的差異。
3、網頁常用字型
Sans-serif:
Helvetica: 被評為設計師最愛的字型，Realist風格，簡潔現代的線條，非常受到追捧。在Mac下面被認為是最佳的網頁字型，在Windows下由于Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，細節上比如R和G有小小差别。如果字号太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常
Lucida Family: Lucida Grande是Mac OS UI的标準字型，屬于humanist風格，稍微活潑一點。Mac下的顯示要比Win下好。
Verdana: 專門為了屏顯而設計的字型，humanist風格，在小字号下仍可以清楚顯示，但是字型細節缺失嚴重，最好别做标題。
Tahoma: 也是humanist風格，字型和Verdana有點像，但是略窄一些，counter略小，曾經是Windows的标準字型，Mac 10.5之後預設也有安裝。
Trebuchet MS: 為微軟設計的一個humanist風格字型，個人覺得個性太過突出，用得不好會不搭。
Serif：
Georgia: 基本上适合正文屏顯的襯線字型，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字型顯示也很清晰，同時細節還算OK。
Times: Times是為了報紙而設計的，特點是可以在有限的空間塞進去更多的文字，筆畫較弱，小字号正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文，被罵得很慘之後換成了Georgia。
中文：
宋體：Win最常見的字型，小字型點陣，大字型TrueType，但是大字型并不好看，是以最好别做标題。
微軟雅黑：Vista之後新引入的字型，打開Cleartype之後顯示效果不錯，不開Cleartype發虛。
華文細黑：Mac下的預設中文。
4、寫個小demo，在各種浏覽上測試了一下，各種浏覽器對這個字型的解析還是有差異的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}
/*}重置*/
div{font-size:1.2em;}
</style>
</head>
<body>
<br/>
--網頁字型通常分為5類--
<div style="font-family: sans-serif;">你好 hello world sans-serif(無襯線) </div>
<div style="font-family: serif;">你好 hello world serif(襯線) </div>
<div style="font-family: monospace;">你好 hello world monospace(等寬) </div>
<div style="font-family: fantasy;">你好 hello world fantasy(夢幻) </div>
<div style="font-family: cuisive;">你好 hello world cuisive(草體) </div>
<br/>
--無襯線類--
<div style="font-family: Helvetica, sans-serif;">你好 hello world Helvetica </div>
<div style="font-family: Arial, sans-serif;">你好 hello world Arial </div>
<div style="font-family: \'Lucida Grande\', sans-serif;">你好 hello world Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">你好 hello world Verdana </div>
<div style="font-family: Tahoma, sans-serif;">你好 hello world Tahoma </div>
<div style="font-family: \'Trebuchet MS\', sans-serif;">你好 hello world Trebuchet MS </div>
<br/>
--襯線類--
<div style="font-family: Georgia, serif;">你好 hello world Georgia </div>
<div style="font-family: Times, serif;">你好 hello world Times </div>
<br/>
--中文字型--
<div style="font-family: 宋體">你好 hello world 宋體 </div>
<div style="font-family: 微軟雅黑">你好 hello world 微軟雅黑 </div>
<div style="font-family: 華文細黑">你好 hello world 華文細黑 </div>
<div style="font-family: 黑體">你好 hello world 黑體 </div>
</body>
</html> 在chrome上顯示的結果
在ie8上顯示的結果
在firefox上顯示的結果
5、在此次測試中發現：
android裝置中各個浏覽器都很不給力（ios的還沒有測試，我想肯定也好不到哪去吧），android手機中各個浏覽器支援的常用字型隻有三種：
sans-serif(無襯線)類 : Arial; //隻要設定成sans-serif類，不管什麼字型，都一個樣子。
serif(襯線)類 ：Georgia； //隻要設定成serif類，不管什麼字型，都一個樣子。
monospace(等寬)類 //隻要設定成monospace類，不管什麼字型，都一個樣子。
移動裝置的浏覽器還需要努力哦。