一· #CSS 抗锯齿技术

字体平滑属性属于早期的 CSS 规范，后来因为种种原因又被移除了。不过现在仍可以通过前缀属性兼容（如 -webkit-font-smoothing）。一般来说，字体平滑有三个值可选，none、subpixel-antialiased、antialiased。值的作用正如其名，分别是无抗锯齿，亚像素级抗锯齿和（全像素）抗锯齿。亚像素抗锯齿会使字体呈现稍细，而像素级抗锯齿则使字体呈现过粗。黑色背景下则反之。倒不必因为知道它就必须使用上——这三种方式有各自的优点和缺陷。一般来说，扔掉这个属性，让浏览器自行判断字体渲染的方式就可以了。如果你引入了特殊字体（比如印刷字体）进行平滑处理。（应该国内排版emmmmmm，能自由发挥的范围应该很有限）

CSS Image-Rendering

Image-Rendering 属性用于设置图像缩放算法
Pixelated 值设置之后，浏览器不会对边缘进行平滑处理，而 Auto 则对整幅图像进行柔和处理。也就是说，使用 Transform Scale 放大图片，浏览器会应用默认的平滑缩放算法（可能是双线性插值之类的）,不过大部分是浏览器对多个 Scale 串联进行了优化，部分内部使用了某种不损失图像信息的采样算法，总之不改变图片尺寸又想使用平滑图片是行不通的。

硬件加速抗锯齿

关于使用浏览器的硬件加速抗锯齿功能，是我在试验 PXAA 时的偶得（不过已经有博客介绍过了）。当元素通过 Transform:Rotate 旋转之后，如果此元素是被 GPU 渲染的，那么会应用浏览器对应 GPU 的抗锯齿属性——比方说你用 GTX 1060ti 运行浏览器，那么相关配置就能在英伟达控制面板中找到（不过这有相当程度是我的猜测，待验证）。听起来好像有点复杂，看下面例子就一目了然了：

Image text;