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

网站优化31,4101字数 857阅读模式

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

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

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

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

-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/

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

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

-webkit-font-smoothing:none | subpixel-antialiased | antialiased

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

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

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

-moz-osx-font-smoothing: inherit | grayscale

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

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

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

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

夏日阳光
  • 本文由 夏日阳光 发表于 2019年9月16日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/101.html
评论  3  访客  3
    • 弥雅
      弥雅 1

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

      • 程志辉
        程志辉 1

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

          • 夏日阳光
            夏日阳光

            @ 程志辉 是的,看来你对CSS3还挺有研究。

        匿名

        发表评论

        匿名网友
        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
        确定

        拖动滑块以完成验证