網(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
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)一步深究,有更好的推薦一定不吝賜教哦~
本文地址:http://m.likemindfilms.com/tutorial/wd1798.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏