設計筆記本

資料來源：歲月如歌　http://lifesinger.org/blog/2009/12/rethink-of-web-default-font/

該作者是淘寶網的網頁工程師之一！

最近瘋狂測試 reset.css, 第一個首要測試點就是默認字體。前不久秦歌的帖子和我的再談，收到了很多朋友的反饋。重新整理了下，請先仔細查看測試頁面：

web-default-font.html

1. Tahoma 字體的問題

小麥總結過。在 IE6 下，Arial 字體在下劃線的顯示上的確略有優勢，甚至有神奇的魔數 1.231 來讓中英文對齊。但除了 IE6, 其他流覽器下，Arial 表現並不好。考慮門戶網站的設計趨勢，鏈結加下劃線的形式，已逐步去掉，比如 YAHOO 首頁。國內騰訊首頁也早就去掉了滿屏的下劃線，目前只有新浪、搜狐等站點依舊滿屏下劃線。考慮 IE6 的佔有率正逐步降低以及面向未來編程，堅持用 Arial 優勢不大。

2. Helvetica 字體的問題

在再談中，考慮漸進增強，把 Helvetica 放在首位。後來仔細測試發現，如果系統中沒有安裝 Helvetica 字體，font-family: helvetica,tahoma,arial; 的寫法，會直接無視 Tahoma. 具體請看上面的測試頁面。這個 bug 是致命的，不得不忍痛割愛，去掉 Helvetica

3. 宋體

宋體的問題不多說。記住：只要 Opera 存在且有一定市場佔有率，就別用 SimSun 這種寫法。

4. 行高的問題

再談裏提到 1.5 會導致一些詭異 bug（主要是垂直居中對齊，需要重置行高為 1）。和同事討論後，覺得與 line-height: 1 帶來的風險相比，還是 1.5 讓人放心。

5. GB 編碼問題

font: 12px sans-serif; 不設置宋體，頁面為 GB 系列編碼時，非中文作業系統下（港臺用戶中有不少英文系統，還有海外華人），IE 的默認字體是 Microsoft Sans Serif Regular, 很難看。截圖為證

有兩個解決方案：a. 用”宋體”墊底；b. 不加 sans-serif.

6. 宋體的問題

宋體用 \5b8b\4f53 表示是為了避免檔編碼不一致時帶來的問題。

綜合上，我們可以得到 Web 默認中文字體的最佳方案：

理想主義者方案 A（所有頁面用 utf-8 編碼）

font: 12px/1.5 tahoma, arial, sans-serif;

理想主義者方案 B（有 gb 編碼的頁面）

font: 12px/1.5 tahoma, arial, simsun, sans-serif;

現實主義者方案 A

font: 12px/1.5 tahoma, arial;

現實主義者方案 B

font: 12px/1.5 arial;

可用性主義者方案：

font-family: verdana, arial, sans-serif;

我自己之前所使用的是

13px/1.5 Arial, Helvetica, sans-serif;

2009-12-04 補充：經朋友提醒，Opera 下的默認中文字體就是宋體，因此只要宋體後無其他中文字體，用 simsun 是沒問題的。上面的最佳方案做了相應調整。