原文地址：http://www.zhangxinxu.com/wordpress/?p=874
一、瀏覽器默認字體
眾所周知，瀏覽器字體默認的設置為“宋體/simsun字體 16像素”，例如Chrome瀏覽器下：
二、CSS中設置的字體
考慮到兼容性，我們總會在CSS中隊字體進行一些設置，這類設置往往設置在body標簽上，無論是人人網，騰訊網，淘寶網，開心，新浪，網易等都是如此。以下為各個大型網站的body的字體設置：
人人網：
body{font-family:Tahoma,Verdana,STHeiTi,simsun,sans-serif;}
其中simsun為中文字體。
騰訊網：
body{font-family:"宋體","Arial Narrow";}
淘寶網：
body{font:12px/1.5 tahoma,arial,sans-serif;}
開心網：
body{font-family:'lucida grande',tahoma,helvetica,arial,'bitstream vera sans',sans-serif;}
新浪微博:
html{font-family:Arial,Helvetica,sans-serif,"宋體"}
白社會：
body{font:12px/20px Tahoma,Verdana,Arial,sans-serif;}
三、瀏覽器默認字體與CSS字體間的關系
要說關系，很簡單，就是CSS字體的級別大於瀏覽器默認字體的級別。但是，在中國，作為中文網站，中文用戶，中英文之間的差異使得故事的發展變得生動有趣了，這也是本文的所討論的關鍵所在。
咱們不急，今天荷蘭和日本對的比賽反正耗得很，聽我娓娓道來~~
應該都知道，瀏覽器的默認字體是可以更改的，例如IE瀏覽器，見下圖：
或者是Firefox瀏覽器，工具 -> 選項 -> 內容，見下圖：
我們現在將默認字體由“宋體”改成“微軟雅黑”，再看看第二部分提到了這些網站頁面的字體表現：
下圖全部截自Firefox3.6瀏覽器下，在IE瀏覽器下修改默認字體也會得到類似的結果，您可以自己試一試，下圖順序與第二部分出現的網站列表是一一對應的，圖上已標明了瀏覽器默認字體“微軟雅黑”是否起作用的情況。
可以看到，人人網，淘寶網以及騰訊網下，頁面上的字體依然長得就像是“宋體”一樣，也就是說，修改瀏覽器的默認字體對其一點效果都沒有；但是在開心網，新浪微博，白社會（以及我的博客）這些頁面上，字體的表現就是微軟雅黑效果。為什么會有這些差異呢？
究其原因，不難理解。在本文的第二段落，將上述網站最頂級標簽的font屬性都羅列了出來，這是有原因的。仔細觀察相應網站的body/html設置的font/font-family屬性，相信您會找出表現差異的原因了——凡是瀏覽器默認字體不起作用的頁面都是在CSS中設置了中文字體的頁面。例如，人人網的simsun字體，騰訊網的“宋體”，淘寶網的“宋體”，只要在font/font-family屬性中出現了對中文字體的設置，那么瀏覽器的自定義的默認字體就會失效，不起作用。OK，這里還有個看似“例外”的情況，就是新浪微博的頁面，其html標簽的CSS字體樣式是：html{font-family:Arial,Helvetica,sans-serif,"宋體";}，其也設置了含“宋體”的字體屬性啊，為何頁面上的表現依然是“微軟雅黑”的效果而與騰訊網、淘寶網不一樣呢？我之前就提過新浪微博的頁面重構的水准與其新浪網的地位不匹，從這個font-family屬性的設置可見一斑。我們在設置font-family屬性是會在最后帶有sans-serif或是serif，其分別表示“無襯線字體”和“襯線字體”，這個東東不是廁所里的屁屁——隨便放的，我個人認為，其作用為終結，終結font-family屬性，也即是說跟在sans-serif/serif后面的字體都是聾子的耳朵——擺設。所以新浪微博頁面字體設置html{font-family:Arial,Helvetica,sans-serif,"宋體";}中的“宋體”壓根就是多余的，永遠也不會起作用，只會加大CSS文件尺寸的冗余代碼。如果將“宋體”調至”sans-serif”的前面，那么情況就會大不一樣。
四、與用戶體驗與頁面可用性之間的關聯
我們為什么要在body中設置font-family屬性，其一就是在於統一，也就是所謂的兼容性，其二就是讓英文字符更好看，“宋體”下的英文字符看多了會讓人覺得蹩腳的……所以我們會設置font-family:arial; 或是font-family:Tahoma;這是需要的。對於中文站點，這類英文字體的設置依舊留下了中文的突破口。要知道，這些英文字體對中文文字的表現是沒有影響的（這里僅指單純的文字表現，對齊、下划線等問題不予考慮），英文字體僅對英文字體及一些字符有影響，中文字體依舊勃起，處於真空的裸露的狀態，這種裸露直接裸給了瀏覽器，也就是說英文字體下的中文字體僅受瀏覽器的默認字體影響，於是這就牽涉到了一個頁面可用性的問題。
有一部分用戶，雖然是一小部分，但是他們喜歡使用自定義的中文字體，拿我身邊的事情舉例吧。我有幾個同事就喜歡“微軟雅黑”字體，他就是把瀏覽器的默認字體設成了“微軟雅黑”。根據他的口述，在他看來，訪問一個網站，發現這個網站的字體不是他自定義的字體，他會有些許的挫敗感，如果一個網站可以接受他修改的字體，以“微軟雅黑”的形式顯示，其對這個網站的認同感也會提升。由於“英文字體下的中文字體僅受瀏覽器的默認字體影響”，這類僅僅設置了英文字體的網站在我的這幾個同事心中的分值無形中就提高了，而強制了中文字體的網站分值會下降。
我們可能僅僅是忽略而已，僅僅是不知道而已！對於中文網站，我們的用戶絕大多數是中文用戶，在頁面上設置中文字體屬性(宋體/simsun)會降低頁面的可用性和潛在的用戶體驗。如今的web，好的產品往往是可以滿足用戶的個性需求和自主能動性。頁面上中文字體的設置會扼殺瀏覽器的默認中文字體，無法讓用戶以自己喜歡的中文字體顯示。所以，我個人的傾向是，不要再CSS中，至少在body/html這類標簽上設置中文字體。
我本想把本文的題目定為“不要再CSS中定義中文字體”，這樣的題目更有噱頭，但是……（我要轉折）。因為我突然想到，有些網站就是不讓你使用您自己定義的字體，比如網站可能會使用“微軟雅黑”與“宋體”來區分中文與標題，如果網站中文字體可以提過瀏覽器自定義，例如“微軟雅黑”，則標題與正文字體一致，反而增加了閱讀瀏覽負擔，降低了用戶體驗。
所以，到底哪種做法更好，要看實際的情況，合適的往往是最好的。但是，您需要知道：在CSS中設置中文字體會讓中文用戶無法通過修改瀏覽器默認字體來按照自己的需要瀏覽網頁。至於具體您會怎么做，那就看您自己了。