您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

网页跨平台字体探索实践

时代在发展,科技在进步,人们的生活也在变化中蒸蒸日上。我们不经意地发现,苹果公司操作系统在我们的周围越发多见。不说人手一部Ipad都已成了标配,就是Mac台式机也都纷纷涌入千家万户。

操作系统份额统计,参考如下:

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

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

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

Mac系统份额在不断上升,与此同时,总有人抱怨说Mac系统下中文网站字体惨不忍睹!作为一名认真负责、有态度、有信仰的前端攻城师,你能容忍这个吗?作为一个用爱设计、体验至尚的前端团队,难道会袖手旁观么?这个真没有!于是乎,中国雅虎UED同学对此进行了一些研究、探讨,希望能够优化Mac系统乃至Ubuntu系统下的中文字体显示效果。

首先搜集了一些资料,大体了解到,可以根据各个操作系统的自带字体,选出一些来测试,如果有一种字体在Mac下支持的很好,在windows和Ubuntu下又会被忽视而使用另外一种字体的话,那么这几种字体的组合将会是一个不错的方案。

一种说法是:不指定网页字体,让其自动选择默认字体。这似乎是一个不错的方案,既然浏览器都有默认字体,浏览器又是跨平台的,浏览器制造商一定会对各种操作系统做了调研,并斟酌了哪种字体适合作为浏览器在该平台下的默认字体。没错,确实如此。但并非尽如人意!本文主要讨论的是中文字体的跨平台优化,Mac有些版本对中文“门”字支持得其丑无比,这当然只是一个例子,说明对中文支持的不好。另外,有时候我们会刻意使用一些非默认字体,比如“微软雅黑”,这个字体在非windows下就不能被默认支持了,如果设置 font-family:’microsoft yahei’; 的话,Mac和Ubuntu下就会使用默认字体来支持中文,效果当然不会好,这个时候需要指定特定字体使Mac很好的支持中文。看来不指定字体的做法并不理想。

另一种说法是:使用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核心浏览器抗锯齿优化(-webkit-font-smoothing:antialiased)效果会更好。起初我也惊叹这种字体设置很不错,mac下确实支持的很好。但后来测试发现,使用该字体会导致行高增加,这让我们不禁有些失望。。

只好再次进行探索。

这一次发现,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都属于非衬线字体,非常适合于网页字体呈现。有关资料提到,衬线字体(比如Times)适合于印刷,不适合于屏幕显示。

有一点值得一提:为什么一开始sans-serif放在arial之前使用呢,arial不是很成熟么?没错,我本人也希望arial置前而sans-serif作为备用,sans-serif下的英文字符要比arial下的宽了那么一点点。不过经测试发现,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; (根据需求使用如果是中文网页则推荐写到body里雅黑:font-family:STHeiti,'Microsoft Yahei',Simhei,Arial,sans-serif; (根据需求使用)

黑体:font-family:STHeiti,Simhei,Arial,sans-serif; (根据需求使用)

这里是一次对中文字体跨平台的初步探讨,测试平台有限,难免会有缺陷。如果有在此方面感兴趣的同学,希望可以进一步深究,有更好的推荐一定不吝赐教哦~

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1798.html
360UXC-快乐CSS3之旅
前端性能优化的14个规则
图趣网微信
建议反馈
×