網(wǎng)頁(yè)跨平臺(tái)字體探索實(shí)踐

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

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

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)份額在不斷上升，與此同時(shí)，總有人抱怨說(shuō)Mac系統(tǒng)下中文網(wǎng)站字體慘不忍睹！作為一名認(rèn)真負(fù)責(zé)、有態(tài)度、有信仰的前端攻城師，你能容忍這個(gè)嗎？作為一個(gè)用愛(ài)設(shè)計(jì)、體驗(yàn)至尚的前端團(tuán)隊(duì)，難道會(huì)袖手旁觀么？這個(gè)真沒(méi)有！于是乎，中國(guó)雅虎UED同學(xué)對(duì)此進(jìn)行了一些研究、探討，希望能夠優(yōu)化Mac系統(tǒng)乃至Ubuntu系統(tǒng)下的中文字體顯示效果。

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

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

另一種說(shuō)法是：使用Arial字體。Arial字體相當(dāng)成熟，在各個(gè)平臺(tái)下支持的都很好。但是Arial屬于英文字體，對(duì)中文字體怎么能很好的支持呢？！baidu.com使用了Arial作為默認(rèn)字體支持，因?yàn)榘俣壤餂](méi)有那個(gè)”門“字（還是以“門”字舉例），如果有的話會(huì)很囧（見(jiàn)下圖）。不過(guò)值得一提的是，Arial字體在windows下可以說(shuō)是對(duì)中文字體毫無(wú)影響，而在mac和ubuntu下卻對(duì)中文字體的邊緣渲染有作用，渲染之后還真是好看了不少呢。但畢竟不是中文字體哦，不能支持好所有中文漢字，我們放棄這種做法吧。

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

只好再次進(jìn)行探索。

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

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

經(jīng)過(guò)一番折騰，我們總結(jié)了以下字體推薦設(shè)置：

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

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

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

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

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