html禁止字体平滑效果,CSS3 属性 font-smoothing 字体平滑处理和抗锯齿渲染

在浏览网页的时候，偶然看到某个网页的字体特别清晰细致，所以就很想知道它使用了什么字体或样式。后来才发现原来是 -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 中表现不明显，大家可以根据场景有选择性地使用。