mac下网页中文字体优化

最近某人吐槽某门户网站在mac下chrome字体超丑，而后发现虽然如今mac用户愈来愈多，可是你们依然无视mac下的字体差别，因而研究了下mac下网页中的中文字体，和你们分享。

看了一遍国内各大门户和SNS网站，虽然可能你们的font-family设置都不太同样，可是貌似如今只有QQ空间对mac下字体作了优化。

ok，言归正传。

mac和windows自带的字体很是不同，因此，针对windows的font-family设置通常不适用于mac系统，而在mac下，会调用系统默认的细黑体(STXihei)，而这个字体渲染的其实并非很好看。

优化的方法有两个：

方案一：使用Hiragino Sans GB字体

关于Hiragino Sans GB

Hiragino Sans GB 是衍生自 Hiragino Kaku Gothic（ヒラギノ角ゴ）的简体中文字体 [1]，近乎完美地继承了原型的风格，有很微妙的喇叭口，弧线柔美、内敛，字面宽大程度合理。这是一款清新的专业印刷字体，小字号时足够清晰，大字号时又不会「细节欠奉」(via http://www.zhihu.com/question/19732722)

目前它是mac系统下自带的比较好看的黑体字体之一，比较适合网页渲染，也广受欢迎。

好比QQ空间的字体设置为：

.os_mac { font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Hiragino Sans GB","Hiragino Sans GB W3"; } 

前面三个字体为英文字体。

使用先后对比:

方案二：使用-webkit-font-smoothing:antialiased

webkit内核私有属性，用于字体抗锯齿，使用后字体看起来会清晰舒服不少：

固然这个只是webkit私有属性，firefox和opera等浏览器不能使用——其实mac版firefox 的字体渲染比webkit要好看一点儿。

总结

那么，到底那种方案好一些呢？

我作了个测试页面，分别用默认字体设置加上-webkit-font-smoothing的各个属性和Hiragino Sans GB使用一样属性设置，最终发现：

• webkit默认使用-webkit-font-smoothing:subpixel-antialiased属性，而不是none；
• Hiragino Sans GB字体和系统默认的细黑体表现差别不是特别大，只是细节更圆润舒服；

围观测试页面：http://labs.qianduan.net/macfont.html，或直接看页面截图。

因此，若是你想偷懒，就只须要添加-webkit-font-smoothing:antialiased就能够了，最求最佳效果，就两个都用上:P

若是你又更好的方案，欢迎提供。