跨平台字体效果浅析.pdf

跨平台字体效果浅析 　　 (本文 中部分图片由于尺寸限制未能体现实际效果，劳烦点击大图查看 ) 在对设计稿视觉还原的过程中，经常会产生一些字体还原的问题。 例如对一些大号文字还原后，实际视觉效果有逊于在 photoshop 上的效果 ;在 Mac 上的设计稿还原后 ，明明用的还是 宋体“ ”和 黑体“ ”，但是还原后字型相距较大 ;而在 Windows 做好的网页在 Mac 上看起来 字体也有点异样。 这篇文章主要对字体作了一些探讨，主要内容分为两部分： 一、字体可用性分析 二、字体实际展示效果分析 结论 由于文章较长，结论先行： 1. Mac Windows 公有可用英文及数字字体有： Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact Times New Roman, Trebuchet MS, Verdana Windows 下可用中文字体有 (中易 )宋体，新宋体，仿宋体，黑体，楷体，微软雅黑 (部分系统适用 )。 Mac 下可用中文字体有 (华文 )宋体，仿宋体，华文黑体，华文细黑，华文楷体。 在 Mac 下网页的字体设置，参考了 Apple 官网的做法，可使用华文黑体，保持与 Mac 本身系统字体的 一致性。 2. 对于微软雅黑，以操作系统计算，覆盖率仅为不到 30% ，未安装该字体的用户可使用宋体或黑体 替代，有必要的话可考虑指定替代字体。 3. 在 Mac 中，未针对 Mac 做 Mac 字体设置的话，网页字体会按一定规则转成 Mac 下的字体。 4. 正文 12px 字体建议使用宋体。 12-17px 宋体比微软雅黑要清晰。 一、字体可用性分析 A. 中文字体： 值得注意的是， mac 下以及 windows 下没有公用的中文字体 (相关详细对比后续讨论 ) 具体预装简体中文字体列表如下： 　　【关于微软雅黑的覆盖率】 据统计，近期 win7+vista 的市场份额之和约在 25% 左右浮动，此部分用户内置微软雅黑，而对于没 有主动安装微软雅黑的 XP- 的用户，在页面中使用微软雅黑时，文字将使用宋体替代。 B. 英文字体： 据统计 (/2007/17/fontmatrix.html) ，mac 以及windows 通用的公有字体有： 　　当页面使用到活字的时候，可联系设计师尽量使用以上中英文字体 。使用这些字体可避免使用图片，降低用户加载时的带宽成本，提升页面的加载速度。 二、字体实际展示效果分析 A. Photoshop 设计效果 vs Web 实际展示效果 　　微软提供了名为 Cleartype 的字体平滑技术，但是在 XP 下， cleartype 是默认关闭的。所以 在vista 以及vista 以上系统中，相比于 XP ，字体渲染更平滑。而 Mac Os X 中，字体渲染更为饱满， 边缘更模糊，视觉上会显得更 粗“”一些。 总体来说： “Mac OS X 的字体渲染强调忠实字体设计，最大化保留字体的外形。边缘平滑是为了更好地传递字 体设计中的曲线等细节，而在这种方针下，有可能引起小字号时的模糊。 而 Windows 的字体渲染强调文字的锐利和清晰。在操作系统介面和网页正文等小字号的地方比较 清晰，但大幅牺牲字体的原貌。 “ —— 节选自 /question 如希望获得更多关于字体渲染的信息，可阅览 /2010/10/15/type-rendering- operating-systems/ B. 在Mac 中，字体的差异性 在 Mac 中，字体的差异性主要体现在中文上。 基于 Mac 的设计稿 —— Windows并不能重现 Mac 下的字体效果