如何設置 font-family 比較好？

01-21

如果設置為font-family: Arial, "微軟雅黑","宋體"; 是不是英文都會使用Arial字體，而中文則視乎你的系統有沒有雅黑，有則用雅黑，無則用宋體？

針對常見的中文英文和日文，如果所有的瀏覽器都能夠正確處理中文的話，理論上的最簡單的設置應該是：

font-family: sans-serif。

這行代碼設置所有字體為系統默認的無稱線字體。如果在各種操作系統和瀏覽器都做對的情況下，它應該對中英文使用默認的無稱線字體。即大多數情況下英文顯示『Arial』或『Helvatica』，中文顯示『黑體』或『微軟雅黑』，日文顯示『哥特體』。當然，也可以設置font-family: serif。那麼相應的就是『Times』、『宋體』和『明朝』。

很可惜這項設置只能在Mac和Windows8下正確顯示。在其它Windows下其實是無效的。原因如下：

除了Win8以外的Windows都會錯誤地使用宋體（稱線字體）顯示。（其實也沒問題，只是那些想用雅黑顯示的網頁就沒戲了）
Windows XP及以前的操作系統上黑體顯示的中文字非常難看不便閱讀。

----------------------分析開始之前----------------------

為了使問題簡化，在此就討論的條件和範圍說明一下：

注1：貌似某些新版本的瀏覽器能夠在Windows上正確分辨中文的稱線和無稱線字體了。

注2：Win8上的IE10似乎已經修正了對無稱線字體的顯示問題。但是不知道Win7的IE10會怎樣。

注3：不討論Windows和Mac以外的操作系統了。

注4：不討論一個網頁內標題和正文使用不同中文字體的情況。

注5：不討論中文、日文和拉丁字母以外的字元。

注6：不討論用戶在瀏覽器的設置中中強行設置字體的情況。

注7：不討論稱線和無稱線字體以外的情況，如等寬字體。（因為對中文實際使無效的）

----------------------分析開始----------------------

在給出答案前，先說各種字體的在各種操作系統上現象：

宋體：

在Windows操作系統上顯示良好。但是僅限於12像素和14像素。超出14像素的字基本就會出現字不夠方正，鋸齒明顯的現象。
在Mac上各種字型大小都可以很好的顯示。這是因為Mac上針對字體所做的反鋸齒效果做的比較好。

黑體或微軟雅黑：

黑體和微軟雅黑都屬於無稱線字體。

Windows Vista，Windows 7和Windows 8上在各種字型大小下顯示良好。但是僅就閱讀來售，雅黑在Windows下不大適合做大段閱讀，因為會出現明顯的字體歪歪扭扭的現象。雅黑比較適合做UI字體，比如按鈕、導航、菜單。大號字體下用以顯示標題也不錯。因此我們看到很多新網站都開始使用雅黑了。
Mac：黑體沒有任何問題。雖然有些人號稱看蘋果上的黑體字很不習慣。但是個人覺得還是最適合閱讀的字體。而且也適合做UI字體。
Windows XP及以前的Windows：這裡就比較複雜了。因為：
1) Windows XP原生是不帶微軟雅黑的。
2) 加裝Office 2007後會加裝微軟雅黑。
3) Windows XP的Clear Type做的非常不好，導致雅黑在Windows XP上的顯示效果基本無法閱讀。（如下面對點點網的截屏）

所以，很多網站所喜歡的把雅黑設置為第一順位的做法就出問題了，

font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;

它會導致：

網站在裝了Office 2007+的Windows XP基本屬於不可用狀態（如上面對點點網的截屏）。
裝了Office的Mac上顯示為雅黑（而不是Mac上顯示效果最佳的黑體）。

----------------------我的答案----------------------

說是『我的答案』，因為實際上使用 font-family: sans-serif; 已經能解決所有的兼容性問題了。唯一的缺憾是在目前的條件下，無法使用微軟雅黑。

為了發揮雅黑的好處，同時解決兼容性問題，我在伺服器端針對各種不同的操作系統做了不同的判斷。如下：

Windows XP及以前版本的Windows
font-family: Arial, 宋體, sans-serif;
Windows Vista和Windows 7
font-family: "Microsoft Yahei", sans-serif;
Sorry，英文就無法設置字體了，因為中文字體都包含了英文字體。好在雅黑顯示英文還湊合。
Mac及其它操作系統
font-family: sans-serif;

其實這還不夠好，因為在Windows下，正文使用宋體顯示比較合適。我的下一步的計劃是：

針對Windows下的正文使用宋體。
針對雅黑字體，用13px和15px等奇數字體顯示，因為效果更好。

與系統有關. 以前測試過這個問題, 但可能不夠全面, 歡迎指正及補充, 大致如下:

在 Windows 下, 只要 font-family 中某個字體存在, 就會完全無視掉它之後的字體, 缺字用默認字體顯示 (也就是宋體).

在 OS X 下, font-family 中位置靠前的字體的缺字會依次用它之後的字體補全, 最後才調用默認字體.

font-family:Helvetica,Tahoma,Arial,STXihei,"華文細黑","Microsoft YaHei","微軟雅黑",sans-serif

嘿嘿

千萬別用方正體！千萬別用方正體！千萬別用方正體！

重要的事情說三遍！

----------------------------------------------------------------------------

微軟雅黑也不建議用！