昨天面试,面试官问了我这样一个问题:如何让文字更清晰更平滑?
一下子没想出来,最后答了个直接导入自己的字体吧,回来我了解了下,原来css3还有这样的特性。
-webkit-font-smoothing
CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。
加和不加的区别,看下面的截图。
为了对比明显我就先将-webkit-font-smoothing设置为none,非常模糊。
将-webkit-font-smoothing设置为antialiased,变得非常平滑,效果非常不错。
其默认可以支持6个值(如图),暂时我能看到效果的就是三个:
none | subpixel-antialiased | antialiased