網頁跨平臺字體探索實踐

時代在發(fā)展，科技在進步，人們的生活也在變化中蒸蒸日上。我們不經意地發(fā)現(xiàn)，蘋果公司操作系統(tǒng)在我們的周圍越發(fā)多見。不說人手一部Ipad都已成了標配，就是Mac臺式機也都紛紛涌入千家萬戶。

操作系統(tǒng)份額統(tǒng)計，參考如下：

http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=0

http://www.w3schools.com/browsers/browsers_os.asp

http://#baidu.com/data/os

Mac系統(tǒng)份額在不斷上升，與此同時，總有人抱怨說Mac系統(tǒng)下中文網站字體慘不忍睹！作為一名認真負責、有態(tài)度、有信仰的前端攻城師，你能容忍這個嗎？作為一個用愛設計、體驗至尚的前端團隊，難道會袖手旁觀么？這個真沒有！于是乎，中國雅虎UED同學對此進行了一些研究、探討，希望能夠優(yōu)化Mac系統(tǒng)乃至Ubuntu系統(tǒng)下的中文字體顯示效果。

首先搜集了一些資料，大體了解到，可以根據(jù)各個操作系統(tǒng)的自帶字體，選出一些來測試，如果有一種字體在Mac下支持的很好，在windows和Ubuntu下又會被忽視而使用另外一種字體的話，那么這幾種字體的組合將會是一個不錯的方案。

一種說法是：不指定網頁字體，讓其自動選擇默認字體。這似乎是一個不錯的方案，既然瀏覽器都有默認字體，瀏覽器又是跨平臺的，瀏覽器制造商一定會對各種操作系統(tǒng)做了調研，并斟酌了哪種字體適合作為瀏覽器在該平臺下的默認字體。沒錯，確實如此。但并非盡如人意！本文主要討論的是中文字體的跨平臺優(yōu)化，Mac有些版本對中文“門”字支持得其丑無比，這當然只是一個例子，說明對中文支持的不好。另外，有時候我們會刻意使用一些非默認字體，比如“微軟雅黑”，這個字體在非windows下就不能被默認支持了，如果設置 font-family:’microsoft yahei’; 的話，Mac和Ubuntu下就會使用默認字體來支持中文，效果當然不會好，這個時候需要指定特定字體使Mac很好的支持中文?？磥聿恢付ㄗ煮w的做法并不理想。

另一種說法是：使用Arial字體。Arial字體相當成熟，在各個平臺下支持的都很好。但是Arial屬于英文字體，對中文字體怎么能很好的支持呢？！baidu.com使用了Arial作為默認字體支持，因為百度里沒有那個”門“字（還是以“門”字舉例），如果有的話會很囧（見下圖）。不過值得一提的是，Arial字體在windows下可以說是對中文字體毫無影響，而在mac和ubuntu下卻對中文字體的邊緣渲染有作用，渲染之后還真是好看了不少呢。但畢竟不是中文字體哦，不能支持好所有中文漢字，我們放棄這種做法吧。

再看一種說法：使用Hiragino Sans GB字體。參見此文：http://www.qianduan.net/mac-the-next-pages-of-chinese-fonts-optimized.html 。筆者認為QQ空間的字體設置可以借鑒，即：font-family: “ff-tisa-web-pro-1″,”ff-tisa-web-pro-2″,”Lucida Grande”,”Hiragino Sans GB”,”Hiragino Sans GB W3″;，同時加以webket核心瀏覽器抗鋸齒優(yōu)化（-webkit-font-smoothing:antialiased）效果會更好。起初我也驚嘆這種字體設置很不錯，mac下確實支持的很好。但后來測試發(fā)現(xiàn)，使用該字體會導致行高增加，這讓我們不禁有些失望。。

只好再次進行探索。

這一次發(fā)現(xiàn)，Mac下有一種自帶字體叫做“華文細黑”，也叫“蘋果細黑”，英文表示為“STHeiti”，經過嘗試該字體對中文支持的很好，而且Windows和Ubuntu下會被忽視（如果沒有安裝此字體），同時Ubuntu下使用默認字體就對中文支持的不錯，而windows下IE不指定宋體會導致中文標點符號渲染不好，再考慮到arial和sans-serif字體各個平臺都很好地支持英文，于是font-family:STHeiti,sans-serif,Arial;font-family:STHeiti,simsun,Arial,sans-serif;便成了我們認為很合適的一種默認字體寫法。sans-serif和Arial都屬于非襯線字體，非常適合于網頁字體呈現(xiàn)。有關資料提到，襯線字體（比如Times）適合于印刷，不適合于屏幕顯示。

有一點值得一提：為什么一開始sans-serif放在arial之前使用呢，arial不是很成熟么？沒錯，我本人也希望arial置前而sans-serif作為備用，sans-serif下的英文字符要比arial下的寬了那么一點點。不過經測試發(fā)現(xiàn)，window下對中文雙引號的支持來看，Chrome下sans-serif的效果更好，arial卻把它渲染成了類似英文引號的樣子，很不搭配，所以沒辦法，就放到前面了。不過IE下sans-serif對中文引號渲染效果也不好，還是需要指定宋體來渲染，這樣的話arial是可以放sans-serif前面的。關于各個平臺下的自帶英文字體，可以參考這里：http://www.apaddedcell.com/sites/www.apaddedcell.com/files/fonts-article/final/index.html

經過一番折騰，我們總結了以下字體推薦設置：

默認：font-family:STHeiti,sans-serif,Arial; （推薦寫到body里）考慮到中文雙引號問題，此條忽略吧

宋體：font-family:STHeiti,simsun,Arial,sans-serif; （根據(jù)需求使用，如果是中文網頁則推薦寫到body里）

雅黑：font-family:STHeiti,'Microsoft Yahei',Simhei,Arial,sans-serif; （根據(jù)需求使用）

黑體：font-family:STHeiti,Simhei,Arial,sans-serif; （根據(jù)需求使用）

這里是一次對中文字體跨平臺的初步探討，測試平臺有限，難免會有缺陷。如果有在此方面感興趣的同學，希望可以進一步深究，有更好的推薦一定不吝賜教哦~