• 17.1k

CSS 中 -webkit-font-smoothing: antialiased 反而让字体更难看了?

阅读 32.8k
评论
    2 个回答
    • 16.3k

    更新,感谢@nightire,将比较误导人的地方进行了修改。

    总结论

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

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


    以下测试则会表明,-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里的渐变。

    不同平台浏览器字体渲染对比附的图可以见端倪(请原谅我盗图,droplr实在太慢):

    请输入图片描述

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

    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 * ?

    ref

    字体渲染技术这篇文章介绍的非常具体:字体渲染详解

        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章