Mac Ｗin 网页字体显示方案

Mac在诞生的时候就把对字体处理尽可能接近原貌成为它很大的一个卖点，而在这些年亲身使用后，个人感觉Mac下的字体确实看起来比Win下舒服些，特别是在浏览网页时，字体比较“珠圆玉润”，可惜的是Mac目前并不是主流，大多数还是Win用户。所以即使你所使用是Mac，在设计仍然要记得平衡Win下的效果。

Mac和Win的显示区别

截了段文字做了个对比,很容易看得出来，字体显示起来是有很大的差别的。

Mac下文字是渲染过，比较饱满，Win下更像素化些，看起来很清晰。具体什么因素造成了这个差别，已经有不少的讨论了。

Joel Spolsky「Font smoothing, anti-aliasing, and sub-pixel rendering」总结了各自的区别。

• 苹果认为，字体渲染算法的目标应尽可能还原字体的设计，即使代价是造成些许模糊。
• 微软认为，字符的形状应和像素契合，以防止模糊，提高可读性，即便扭曲了字体的构造。

Typekkit 「Type rendering: operating systems 」也总结了一段

• Mac OS X users see Core Text, Windows 7 and Windows Vista users see either DirectWrite or GDI, and Windows XP users see GDI. For now,

还有更多，我就不摘过来了，大家可自行搜索。

默认字体&CSS字体设置

字体的差异不仅是渲染的效果，其实Mac和Win的默认字体也是不一样的，Mac是“华文黑体(Heiti SC Light 和 Heiti SC Medium)”，Win是“宋体(Simsun)”，所以在页面没设置默认字体的情况下，同个页面在2个系统同时展示的中文字体也是不一样。（字体效果可以见刚才的2个系统字体对比图）。

有种特殊的情况，即使命名了默认中文字体Mac也会使用系统默认字体，不知这算不算是一个Bug，情况如下：

• font-family:”宋体” Mac下无法认出宋体，Win可以认出
• font-family:”simsun” Mac和Win都可以认出宋体

在使用中文命名时，还可能会遇上CSS编码导致发生乱码的问题：

综合发生的情况，建议在设置字体时都使用英文描述，这些是从网上找了相关中英文字体的命名：

• 宋体: SimSun
• 黑体: SimHei
• 华文细黑: STHeiti Light [STXihei]
• 华文黑体: STHeiti
• 微软雅黑: Microsoft YaHei
• 微软正黑体: Microsoft JhengHei
• 新宋体: NSimSun
• 新细明体: PMingLiU
• 仿宋: FangSong
• 楷体: KaiTi
• 更多中文字体的英文名称的文档

暂定的解决方案

在设计时候如何能够平衡Mac和Win的设计差别? Win下面可以在PS中使用“宋体无渲染”完全还原默认系统的文字效果，但Mac下可能系统的文字渲染和PS中的文字渲染算法不一样，总是有点差别，没办法完全的还原。

所以在考虑到网站的用户是以Win为主，PS中又能够完全的还原Win下文字的显示效果，同时之前的一段中发现在Win下面有不错效果在Mac下也会有不错的表现之后，有了一个暂定的方案：

• 统一使用“宋体无渲染”为默认文字，先保证在Win系统下的显示效果
• 在CSS中不订下默认字体，根据系统格式调整
• 在网页上线后在Mac下再进行一次复查，保证Mac下的显示效果

目前这个是能考虑到的暂定的方案，看到这篇文章的设计师们有没有更好的解决方案？

【延伸阅读】

针对Mac单独优化字体 mac下网页中文字体优化
Mac下字体研究 关于MacOS下字体的一些研究

icojump原文：http://icojump.in/?p=2200
推荐关注产品设计微博:@ICOjump