在浏览网页的时候,偶然看到某个网页的字体特别清晰细致,所以就很想知道它使用了什么字体或样式。后来才发现原来是 -webkit-font-smoothing 这个 CSS 属性渲染的结果,这个属性可以对字体进行抗锯齿渲染,使得字体看起来会更加清晰舒服。
它是一个非标准化的 css 属性,曾被列入了标准规范的草案中,但由于不同操作系统对字体渲染不同,不同浏览器也有自己对样式的一套解释规则,所以这个 css 样式至今也没有加入 web 标准。
我们可以使用以下两种定义进行抗锯齿渲染:
1
2-webkit-font-smoothing:antialiased;/*chrome、safari*/
-moz-osx-font-smoothing:grayscale;/*firefox*/
前缀 -webkit 是 chrome 和 safari 的私有属性,-moz 是 Firefox 的私有属性。
1、Webkit在自己的引擎中支持了这一效果
1-webkit-font-smoothing:none|subpixel-antialiased|antialiased
-webkit-font-smoothing这个属性适用于 Chrome 和 Safiri 浏览器,它有三个属性值:
none:对低像素的文本比较好
subpixel-antialiased:默认值
antialiased:抗锯齿很好
2、Gecko也推出了自己的抗锯齿效果的非标准定义
1-moz-osx-font-smoothing:inherit|grayscale
-moz-osx-font-smoothing,是火狐针对 ios 系统制定的规则,有两个属性值:
inherit:默认值
grayscale:抗锯齿很好
结束语:
font-smoothing 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰,适合于 Webkit 和 Gecko 内核的浏览器,在 Mac OS 和 ios 中表现比较明显,在 windows 中表现不明显,大家可以根据场景有选择性地使用。