OS X Mavericks 系统下 Safari 7 的字体渲染有何不同，为什么更虚？

这是 Safari WebKit 中的一个 bug，一些 CSS 属性会导致文字的亚像素渲染失效，目前测试出可能导致触发的条件有：

· position 为 fixed 时

· background 为 fixed 时

· box-shadow 与 position fixed 联用时

例如知乎顶部，去掉此属性可以看到正常的渲染：

(去掉 zu-top 的 box-shadow 或 position:fixed)

(原始渲染)

解决方案：

使用 Safari 用户自定义样式表，引入如下 CSS：

body {-webkit-font-smoothing: subpixel-antialiased !important; }

应该是因为 OS X Mavericks Safari 的内核特意为渲染做的「调整」。

因为我也不确定，这到底是个 feature 还是 bug。

可以通过 CSS 来模拟那种所谓「发虚」的字体。

下图为非 retina MacBook 下的效果，同一张页面上。无论是 Safari 还是 Chrome，该页面显示效果是一样的。

上部分的所有文字都有样式：-webkit-font-smoothing: antialiased;

下部分则没有（默认为 subpixel-antialiased），其余所有样式完全一样。

至于为什么发虚，以及感觉字体变细。

因为上部分采用了 gray-scale 灰阶字体渲染，在一定程度上相当于减少了文字的渲染细节，不需要考虑一个像素点还要如何分配三个颜色的亚像素。

如果使用 retina 就会觉得 antialiasing 的灰阶渲染其实很舒服。