跨平台字体效果浅谈.pdf

跨平台字体效果浅析 　　(本文 中部分图片由于尺寸限制未能体现实际效果 ，劳烦 击大图查看) 在对设计稿视觉还原的过程中 ，经常会产生一些字体还原的问题。 例如对一些大号文字还原后 ，实际视觉效果有逊于在phot osho p上的效果;在Mac上的设计稿还原后 ，明明用的还是“宋体”和“黑体” ，但是还原后字型相距较大;而在W indows做好的网页在Mac上看起来 字体也有 异样。 这篇文章主要对字体作了一些探讨 ，主要内容分为两部分 ： 一、字体可用性分析 二、字体实际展示效果分析 结论 由于文章较长 ，结论先行 ： 1. Mac W indows公有可用英文及数字字体有 ：A rial, A rial Black, Co mic Sans MS, Co rier New, Geo rgia, Impact T imes New Ro man, T reb chet MS, Verdana W indows下可用中文字体有(中易)宋体 ，新宋体 ，仿宋体 ，黑体 ，楷体 ，微软雅黑(部分系统适用)。 Mac下可用中文字体有(华文)宋体 ，仿宋体 ，华文黑体 ，华文细黑 ，华文楷体。 在Mac下网页的字体设置 ，参考了A pple官网的做法 ，可使用华文黑体 ，保持与Mac本身系统字体的 一致性。 2. 对于微软雅黑 ，以操作系统计算 ，覆盖率仅为不到30% ，未安装该字体的用户可使用宋体或黑体 替代 ，有必要的话可考虑指定替代字体。 3. 在Mac中 ，未针对Mac做Mac字体设置的话 ，网页字体会按一定规则转成Mac下的字体。 4 . 正文12px字体建议使用宋体。12- 17px宋体比微软雅黑要清晰。 一、字体可用性分析 A . 中文字体 ： 值得注意的是 ，mac下以及w indows下没有公用的中文字体(相关详细对比后续讨论) 具体预装简体中文字体列表如下 ： 　　 【关于微软雅黑的覆盖率】 据统计 ，近期w in7+vist a的市场份额之和约在25%左右浮动 ，此部分用户内置微软雅黑 ，而对于没 有主动安装微软雅黑的X P-的用户 ，在页面中使用微软雅黑时 ，文字将使用宋体替代。 B. 英文字体 ： 据统计(ht t p://media.24ways.o rg/2007/17/f o nt mat rix.ht ml) ，mac以及w indows通用的公有字体有 ： 　　当页面使用到活字的时候 ，可联系设计师尽量使用以上中英文字体 。使用这些字体可避免使用图片 ，降低用户加载时的带宽成本 ，提升页面的加载速度。 二、字体实际展示效果分析 A . Phot osho p设计效果 vs Web实际展示效果 　　微软提供了名为Cleart ype的字体平滑技术 ，但是在X P下 ，cleart ype是默认关闭的。所以 在vist a以及vist a以上系统中 ，相比于X P ，字体渲染更平滑。而Mac Os X 中 ，字体渲染更为饱满 ， 边缘更模糊 ，视觉上会显得更“粗”一些。 总体来说 ： “Mac O S X 的字体渲染强调忠实字体设计 ，最大化保留字体的外形。边缘平滑是为了更好地传递字 体设计中的曲线等细节 ，而在这种方针下 ，有可能引起小字号时的模糊。 而 W indows 的字体渲染强调文字的锐利和清晰。在操作系统介面和网页正文等小字号的地方比较 清晰 ，但大幅牺牲字体的原貌。“ ——节选自ht t p://www.z hih .co m/q est io n/1957304 8 如希望获得更多关于字体渲染的信息 ，可阅览ht t p://blog.t ypekit .co m/2010/10/15/t ype-rendering- o perat ing-syst ems/ B. 在Mac中 ，字体的差异性 在Mac中 ，字体的差异性主要体现在中文上。 基于Mac的设计稿——W indows并不能重现Mac下的字体效果 一些设计师可能会使用Mac进行设计 ，但是会发现Mac设计出来的页面在还原之后 ，字体的视觉差 异较大 ， 这是因为Mac下的宋体以及W indows下的宋体 ，Mac下的黑体以及W indows下的黑体是不同的。 W indows系统下 ，其“宋体”=“中易宋体” ，“黑体”=“中易黑体” Mac