网页跨平台字体探索实践

时代在发展，科技在进步，人们的生活也在变化中蒸蒸日上。我们不经意地发现，苹果公司操作系统在我们的周围越发多见。不说人手一部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; （根据需求使用）

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