Hello, 大家好，又是我~

大家有看過font set和一些要注意的基本問題以及通用字體族兩篇文章后，應該對字體的基本有了一些了解。現在我們開始把這些知識都應用到實戰中吧！

- 規范中 font-family 的解釋方式

我們定義下面這個字體表：

font-family: "Comic Sans MS", "幼圓", "黑體", sans-serif;

按照W3C的規范，瀏覽器在使用這個 font-family 顯示一個字符時，首先應該尋找 Comic Sans MS 字體。如果找不到 Comic Sans MS 字體，那么順序搜尋下一個字體，即幼圓字體。如果找到 Comic Sans MS 這個字體，那么瀏覽器會在 Comic Sans MS 字體中尋找這個字符。如果找到這個字符，就使用 Comic Sans MS 字體來顯示這個字符。如果沒有找到這個字符，或者這個字符對應一個缺字符（缺字符是字體文件中的一種特殊字符，用來表示字體文件中沒有這個字符。通常就是 顯示一個方塊），那么就要到下一個字體，也就是幼圓體中繼續搜尋這個字符。如此搜索整個字體表，知道搜索到這個字符為止。如果在通用字體，也就是這里的 sans-serif 字體中也找不到這個字符的話，那么瀏覽器就應該顯示該字體的缺字符。

所以，如果有下面這句話：

所以我說：“這也是沒辦法的，it ain't going nowhere”。

那么，在一個正常的Windows XP系統上，所有中文字符都會被顯示為幼圓，英文字符都被顯示為 Comic Sans MS 字體。比如“說”字，瀏覽器先搜索 Comic Sans MS 字體，得到一個缺字符，于是搜索幼圓。系統中存在幼圓字體，于是終止搜索，將“說”字顯示為幼圓字體。對于英文字符“i”，瀏覽器在 Comic Sans MS 這個字體中就能找到這個字符，于是就用 Comic Sans MS 顯示 i 這個字符。

另外，雙引號——“”，這兩個字符其實在 Comic Sans MS 中也有。所以瀏覽器會用 Comic Sans MS 中的雙引號來顯示。

- 事實上呢？

大家來看看截圖吧：

Internet Explorer 7

Firefox 2

Opera 9

Safari 3.1 Windows

……簡直是一個瀏覽器一個樣子嘛

這樣還叫人怎么正經干活嘛

仔細看看，其實Firefox 和Safari 顯示的還算靠譜，在這個例子里，顯示的都正確。IE 和 Opera 都沒有能用正確的字體顯示中文字符。因為在 Comic Sans MS 搜索失效后，理應搜索幼圓字體。但不知道因為什么原因，IE 和 Opera 都沒有順序搜索下一個字體，甚至也沒有搜索后面的黑體和sans-serif，而是直接跳到系統默認字體了——請注意，是系統默認字體，因為我已經在 Opera 里把 sans-serif 設成了雅黑，如果 Opera 還有良心搜索下 sans-serif 的話，還是應該用雅黑顯示中文字符的。而且，不知怎么的，Comic Sans MS 中明明存在的雙引號，也沒能在 Opera 中得到正確的顯示。什么號稱最完美支持 CSS 的瀏覽器嘛，簡直浪得虛名  

IE 7 起碼還好些，至少認了和英文字符直接相連的雙引號。但是除此之外，也算是完敗。

另外大家也不要認為Safari 是好人——某些版本的 Safari 3 for Windows 在第一個字體中尋找不到中文字符時，它干脆就顯示了那個字體的缺字符，于是，所有的中文網頁變成了整屏的囗囗囗囗囗囗囗，根本無法閱讀   經本人和其他許多發現這個bug的人多次向Apple交涉，他們才最終修正了這個bug。

至于 Firefox, 其實也不完美，因為 Firefox 不支持字體別名。于是幼圓你只能寫成"幼圓"，黑體你只能寫成"黑體"，而不能用他們在系統中的正式字體名稱——YouYuan 和 SimHei 。

對于瀏覽器為什么會產生這么多五花八門的奇怪渲染，偶也不知道，估計只有問這些瀏覽器的開發人員了

- 解決方案

因為主流瀏覽器在中文顯示中實在無法統一，因此，解決上面這個問題的辦法也只能是折衷和妥協的方案。至于如何折衷，那么要看你到底想要保證英文字符的顯示效果，還是中文字符的顯示效果。

如果你希望保證中文的顯示效果，那么你必須把你想要顯示的中文字體放在 family-font 定義的第一位。比如上面例子里的樣式定義，你可以寫成：

font-family: "幼圓", "Comic Sans MS", sans-serif;

這樣就可以保證所有中文字符都顯示為幼圓。至于為什么 IE 和 Opera 又認了在 font-family 首位的幼圓，這個也不要問偶，總之它們就是認了

這樣做的缺點也是顯而易見的。一般中文字體中都會包含英文字符，比如上面的幼圓。所以網頁中的英文字符也會優先應用這些中文字體來顯示。而中文字體 中的英文字符，通常都不怎么好看。比如還是這個幼圓，里面的英文字符根本就和宋體一模一樣，根本和幼圓中的中文字符不搭調。于是中英混排的文章就極其難看。而且很遺憾，一般網頁上，中英混排的情況還是很多的，比如用戶名、日期時間、URL等等，總是少不了英數字……

另外，這個方案也不能從根本上解決瀏覽器對中文字符支持的缺陷。比如這種情況：有人非常喜歡黑體字的效果，所以想用微軟雅黑來顯示你的網頁，但是考慮到只有 Windows Vista 才有微軟雅黑字體，所以打算在沒有雅黑的電腦上用黑體來顯示文字，于是他寫了這么個樣式規則：

font-family: "微軟雅黑", "黑體", sans-serif;

但實際測試下來，他會發現，即使第一個字體設置成了中文字體，在這個字體缺失的情況下，IE 和 Opera 還是不會使用第二位的黑體，而繼續它們自己的莫名其妙的規則，使用了系統默認字體——宋體。這顯然還是不能滿足設置 font-family 屬性的初衷。

第二個方案是，仍舊按照CSS標準的解釋方式來寫 font-family，但是在 font-size 上做些手腳，只用 12px, 14px, 16px 等穩扎穩打的字體大小。這樣做最大的好處是能優先用最合適的字體顯示英文字符。至于中文字符，XP的宋體也好，Vista的雅黑也好，OS的新宋體也好，在上面幾個字體大小下顯示的都不算難看。何況中文字體的選擇范圍本來就比較小，無外乎也就是那幾個系統默認字體，因此自然也湊合。個人比較傾向使用這種方案。

至于具體選用哪種方案，還需要大家根據實際情況斟酌而定。

今天就講到這里吧。下次我會從跨平臺兼容性上講述如何實際應用字體喲~

那么，大家下次見吧~