前言

-webkit-font-smoothing 控制的字体渲染只对MacOS的Webkit有效。
所以,你在MacOS测试环境下面设置 -webkit-font-smoothing 时,只要你不把它设置为none,怎么好看就设置为什么属性,反正这个属性仅仅是面向MacOS,不会在其他上下文中出岔子的(除了none的情形)。

前端控制字体渲染的接口非常匮乏,如果可能,尽可能地控制输出的字体,而非控制字体渲染比较好。

本文转载自 segmentfault.com@Humphry

不同环境下的显示效果

以下测试则会表明,-webkit-font-smoothing 在MacOS上才有效果。

Windows

测试环境: Win7 Pro + Chrome

结论:Windows系统上 -webkit-font-smoothing 属性不造成区别。

iOS

测试环境:iPad Air + iOS7 + Safari

(iOS上没有Hiragino Sans GB字体,不要被标题误导了……)

结论:iOS上,修改 -webkit-font-smoothing 属性,结果是:

  • -webkit-font-smoothing: none : 无抗锯齿
  • -webkit-font-smoothing: antialiased | subpixel-antialiased | default : 灰度平滑

MacOS

测试环境:MBP + Safari

结论:iOS上,修改 -webkit-font-smoothing 属性,结果是:

  • -webkit-font-smoothing: none : 无抗锯齿
  • -webkit-font-smoothing: subpixel-antialiased | default : 次像素平滑
  • -webkit-font-smoothing: antialiased : 灰度平滑

字体抗锯齿技术

字体抗锯齿技术可以分为如下几类:

  • 黑白渲染:现在已经绝迹
  • 灰度渲染:常用于Android和iOS等移动设备的
  • 次像素平滑:常见于Mac OS和MacType For Windows
  • ClearType:黑白渲染和次像素平滑的折中。WinXP内置,默认关闭;Win7以上默认打开

(以下从左往右)理想形状;黑白渲染;灰度渲染。

次像素平滑技术原理,从右往左看,注意到一个pixel里的渐变。

不同平台浏览器字体渲染对比附的图可以见端倪:

以下表格是我综合多方资料的结果,欢迎纠错:

Device OS Browser Technic ClearType Grayscale Subpixel
Desktop Win XP IE6-8 GDI Grayscale
Win Vista+ IE7-8 GDI ClearType
Win Vista+ IE9+ DirectWrite
Win * Modern GDI Grayscale/GDI ClearType
Mac OS * Quartz
iOS Device iOS * ?

鸣谢以下单位提供各种资料来源
https://segmentfault.com/q/1010000000467910

Safari中position对-webkit-font-smoothing的影响

阅读本文前建议先了解 -webkit-font-smoothing,戳这里查看。 最近在调整本blog的header样式的时候发现一个神奇的问题,当一个元素从 position:fixed; 变更为...

阅读全文

本地调试关闭Chrome的同源策略

右键chrome的快捷方式,在“目标”尾部追加两个参数 --user-data-dir --disable-web-security 关闭所有chrome实例重新打开即可。

阅读全文

编译SCSS/SASS报错Invalid GBK character解决方案

webstorm中编辑scss文件可以添加一个watcher实现实时的css编译输出预览功能,今日在配置webstorm环境的时候发现报了某个scss文件Invalid GBK character编译错...

阅读全文

评论已经关闭。