CSS3 属性 font-smoothing 字体平滑处理和抗锯齿渲染

2019年9月16日16:11:32 3 118

在浏览网页的时候,偶然看到某个网页的字体特别清晰细致,所以就很想知道它使用了什么字体或样式。后来才发现原来是 -webkit-font-smoothing 这个 CSS 属性渲染的结果,这个属性可以对字体进行抗锯齿渲染,使得字体看起来会更加清晰舒服。

CSS3 属性 font-smoothing 字体平滑处理和抗锯齿渲染

它是一个非标准化的 css 属性,曾被列入了标准规范的草案中,但由于不同操作系统对字体渲染不同,不同浏览器也有自己对样式的一套解释规则,所以这个 css 样式至今也没有加入 web 标准。

我们可以使用以下两种定义进行抗锯齿渲染:

前缀 -webkit 是 chrome 和 safari 的私有属性,-moz 是 Firefox 的私有属性。

1、Webkit在自己的引擎中支持了这一效果

-webkit-font-smoothing 这个属性适用于 Chrome 和 Safiri 浏览器,它有三个属性值:

none:对低像素的文本比较好
subpixel-antialiased:默认值
antialiased:抗锯齿很好

2、Gecko也推出了自己的抗锯齿效果的非标准定义

-moz-osx-font-smoothing,是火狐针对 ios 系统制定的规则,有两个属性值:

inherit:默认值
grayscale:抗锯齿很好

结束语:
font-smoothing 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰,适合于 Webkit 和 Gecko 内核的浏览器,在 Mac OS 和 ios 中表现比较明显,在 windows 中表现不明显,大家可以根据场景有选择性地使用。

最后更新:2019-09-16
weinxin
关于本站
本站是一个分享建站经验、SEO优化、互联网技术以及日常生活的个人生活博客。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  2   博主  1

    • avatar 程志辉 1

      有些私有属性用起来很舒服

      • avatar 弥雅 0

        有意思,学习了,晚上给自己的博客加上这CSS属性!