不同平台浏览器字体渲染对比

标题党

大图:http://d.pr/i/I75v `a` 的 font-family 为 Arial, 作为对齐基准 Photoshop CC 中 `三` 的 font family 为 "黑体-简 (Heiti SC)";其中第一个为默认字体,第二个字体上设置了 "仿粗(Faux Bold,就是在字符面板中一个加粗的 ‘T’)" 浏览器中 `三` 的 font-family 为 "Helvetica,Arial,sans-serif",第二个设置了 `font-weight: bold` 上半部分字号为 14px,下半部分为 28px,不同字号粗细差异会不同 结果: 1. 低版本 Windows 的宋体对 `font-weight: bold` 的分辨度很低 2. Windows 上浏览器字体渲染结果差异最大, Andorid 没条件测更多设备,苹果系最一致,但也有差异 3. 不考虑宋体,PS 设置的仿粗比浏览器设置了 `font-weight: bold` 的字体均要细,大字号上更明显 4. 移动设备上因为有高 ppi 均不使用 Subpixel rendering 来抗锯齿*。桌面设备上多数使用 Subpixel rendering,除 Win8 的 IE10 和 IE11,以及 Mac 的 Retina 屏外。 * 也有猜测是因为移动设备可能旋转,导致 subpixel rendering 需要重新进行 对PS 仿粗体比浏览器的效果更细的问题做了测试

大图:http://d.pr/i/EASj 主要差异应该是在抗锯齿算法上,PS 中将文字的抗锯齿模式设为 "浑厚 (Strong)" 可以让文字在仿粗的时候达到与多数浏览器接近的粗细(但又会稍粗一点)。 问题是,我觉得这种粗度其实挺丑的。加上主要的桌面设备的用户的浏览器默认中文字体会是宋体,粗细的区分度会很低,Web 设计师是否应该避免对 *中文* 字符使用加粗呢? ---- 设备的检测用的是 browserstack,@雨忆 的付费帐号 渲染差异 Mockee 讲过 https://speakerdeck.com/mockee/type-is-beautiful?slide=6 不是很懂字体,欢迎批评

© 本文版权归 灭灭 所有,任何形式转载请联系作者。

© 了解版权计划