年末了，任務比較少，經理看我閒著，是不是感覺很不自在啊。遂給我一個任務：調研一下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類，不管什麼字體，都一個樣子。
移動設備的浏覽器還需要努力哦。
- 上一頁:塊元素和內嵌元素
- 下一頁:行內元素和塊級元素有哪些