非 CSS 标准的字体抗锯齿属性 -webkit-font-smoothing

「抗锯齿」( 英语 anti-aliasing，简称 AA ) ，有时也称之为边缘柔化、消除混叠、抗图像折叠有损等

那么，锯齿是什么东西呢？

就是字体或图片的边缘会出现锯齿状而不是一条明显的线段这样。一个很简单的例子，你可以看我们本站的所有节点的投标，就是有很明显的锯齿

看到没，折线上的图片很明显的锯齿

为了消除这种锯齿，使得边缘变得平滑，就要使用一种抗锯齿的东西

CSS 中的抗锯齿

对字体进行抗锯齿可以让文字看起来更清晰和输入，尤其是图标字体越来越流行的现代网页设计。

CSS 3 的草案中本来引入了 font-smoothing 作为抗锯齿属性，但后来却移除了，不过越来越多的浏览器对这个属性提供了支持，最流行的莫过于使用 WebKit 内核的 Safari 和 Chrome

它们使用自己专有的前缀定义了一个 -webkit-font-smoothing 属性

注意：这个属性只有在 Mac 电脑上有效，也就是 OSX 系统上有效

-webkit-font-smoothing 属性

Webkit 在自己的引擎中支持了抗锯齿效果，特意定义了 -webkit-font-smoothing 属性

语法格式如下

-webkit-font-smoothing: inherit|none|subpixel-antialiased|antialiased

各个属性值说明如下

值	说明
inherit	继承父辈元素的 `-webkit-font-smoothing` 值
none	不使用抗锯齿属性，一般用于低像素 ( px ) 的文本
subpixel-antialiased	默认值，次像素平滑
antialiased	抗锯齿，灰度平滑

范例，下面的 CSS 样式对所有的 p 元素添加了看锯齿属性

p { -webkit-font-smoothing:antialiased}

-moz-osx-font-smoothing

Firefox 也推出了子有前缀的抗锯齿属性，不过该属性目前只有在 OSX 电脑上才能使用

语法格式如下

-moz-osx-font-smoothing: auto | grayscale

各个属性值的说明如下

值	说明
auto	允许浏览器自行选择是否开启字体平滑的优化，通常是灰度
grayscale	使用灰度抗锯齿渲染文本，而不是子像素。在深色背景上从子像素渲染切换到抗锯齿，使其看起来更轻

实战

因为抗锯齿在高精度屏幕上，也就是视网膜屏幕上使用更佳，所以我们一般会如下使用抗锯齿

例如，给 p 元素添加抗锯齿

@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 2dppx){
    /* Retina下仍使用默认字体渲染 */
    p {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}

-webkit-min-device-pixel-ratio 指定 DPI 与实际像素之间的比例不低于 1.5

而 min-resolution: 2dppx 则指定实际最低渲染比例最低为 2dppx，目前只有视网膜屏幕

结论

有了平滑，其实在视网膜屏幕上看起来还是很爽的