用上 Mac 之后，喜歡上了一種字體——“雅痞-簡”（Yuppy SC）。於是在 Chrome 與 Firefox 中將 Sans-serif 字體設置為 Yuppy SC，卻發現在 Chrome 中能正常顯示，在 Firefox 中不能正常顯示。這篇文章分享的就是如何解決這個字體顯示問題。
英文版 Chrome 中的字體設置：
英文版 Firefox 中的字體設置：
這樣設置之后，Chrome 中顯示正常，下面就是“雅痞-簡”的顯示效果：
但在 Firefox 中顯示的卻是一種未知的默認字體：
博客園首頁的 css 中對字體是這樣定義的：
body { font-family: Verdana,Arial,Helvetica,sans-serif; }
由於 css 中沒有定義中文字體，所以瀏覽器顯示中文時，會用其設置中針對 Sans-serif 定義的默認字體（這里是“雅痞-簡”）進行顯示。
Chrome 表現正常，Firefox 表現詭異，當時以為是 Mac 版 Firefox 本身的問題。再加上平時主要用 Chrome，很少用 Firefox，也就沒去研究這個問題。
今天在 Firefox 中用 Google 搜索時突然發現正常顯示了“雅痞-簡”字體，在搜索結果中打開豆瓣網站，也能正常顯示“雅痞-簡”字體。既然這兩個網站都能正常顯示，那說明不是 Firefox 程序本身的問題，肯定有辦法解決，動手！
開始以為是 css 的問題，但即使使用與 Google 或豆瓣同樣的 css 定義，也是同樣的問題。
后來直接在 css 中將字體定義為“雅痞-簡”（Yuppy SC）：
body { font-family: Yuppy SC; }
竟然正常顯示了。
當時的分析是：Firefox 雖然正常解析了 css 中的 sans-serif，但是並沒有使用為其定義的 Yuppy SC 字體（可能不匹配某些條件），而是使用了一種 Firefox 默認的字體。
再看一下之前的那張 Firefox 字體設置圖：
看第一行文字“Fonts for: Simplified Chinese”，這個設置是針對簡體中文頁面的。沒有使用下面設置的字體進行顯示，說明 Firefox 並不知道這是一個簡體中文頁面。雖然在頁面中通過 <meta charset="utf-8"> 定義了字符集，但 Simplified Chinese 是 UTF-8 的子集，因此 Firefox 不知道當前頁面是“簡體中文”合情合理。
為什么 Google 與豆瓣能正常顯示呢？有了上面的線索，就容易找到問題的原因。經過比較發現：
在 Google 頁面的 HTML 代碼中有這樣一行（注意加粗的部分）：
<body marginheight="3" lang="zh" id="gsr" topmargin="3" class="tbo">
在豆瓣頁面的 HTML 代碼中有這樣一行（注意加粗的部分）：
<html lang="zh-CN" class="ua-mac ua-ff19 book-new-nav">
看到這個不同之處，恍然大悟。原來在 HTML 中還有 lang 這個屬性，之前真沒注意過。通過這個屬性，瀏覽器可以清楚地知道當前頁面所用的語言。
於是，采用了豆瓣的方法（<html lang="zh-cn">）解決了 Firefox 的字體顯示問題：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>博客園 - 程序員的網上家園</title>
本來以為問題就此解決了，可是回到 Chrome 中一看，Firefox 中的問題在 Chrome 中重演了 —— Chrome 不以“雅痞-簡”顯示網頁，而是以默認的宋體進行顯示（Google 與豆瓣也存在同樣的問題） 。
也就是說在英文版 Chrome 中針對 Sans-serif 設置的字體對中文網頁（HMTL代碼中有 lang="zh" 或 lang="zh-cn"）不起作用。
不設置 lang="zh-cn"，Firefox 不能正常顯示；設置了 lang="zh-cn"，Chrome 不能正常顯示。
要 Chrome 還是要 Firefox，這是個問題？這不是問題，真正的問題是如何兩者都要？
偏愛 Chrome 多一些，那就先把 lang="zh-cn" 去掉；那 Firefox 呢，另想辦法。
之前已經分析過，Firefox 中不能顯示“雅痞-簡”（Yuppy SC）字體是因為 Firefox 不知道當前頁面是簡體中文（HTML 中沒有 lang="zh-cn"）。那么 Firefox 肯定把這個頁面當作了另外一種語言來顯示，我們只要找出是哪個語言，然后針對這個語言將 Sans-serif 設置為 Yuppy SC，就能解決這個問題。
基於這個想法，找出了另外一種語言，它就是 Western，針對 Western 將 Sans-serif 設置為 Yuppy SC，問題立即解決！見下圖：
