css网页字体变清晰:-webkit-font-smoothing字体抗锯齿

时间:2017-08-12
简介:WEB前端|CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页

CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。

加和不加的区别,看下面的截图。

  1. 为了对比明显我就先将-webkit-font-smoothing设置为none,非常模糊。

    css网页字体变清晰,css字体抗锯齿(图1)
  2. 将-webkit-font-smoothing设置为antialiased,变得非常平滑,效果非常不错。

    css网页字体变清晰,css字体抗锯齿(图2)
  3. 其默认可以支持6个值(如图),暂时我能看到效果的就是三个:

    none | subpixel-antialiased | antialiased

    其他的三个,我设置了,好像没什么变化。大家可以自己在控制台调试看看。

    css网页字体变清晰,css字体抗锯齿(图3)

TAGS:css网页字体变清晰css字体抗锯齿

上一编:css3网站的大字锯齿边 字体平滑处理和抗锯齿渲染

下一编:没有了

NewHot手机版