对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。

在线demo: https://jsfiddle.net/zhangchi/rxmyq1L7/6/

font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。

但是,我们可以用以下两种定义进行抗锯齿渲染

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

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

  • webkit-font-smoothing它有三个属性值:
  • **none:**对低像素的文本比较好
  • subpixel-antialiased:默认值
  • antialiased:抗锯齿很好

例子:

body{ -webkit-font-smoothing: antialiased; }

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰。加上之后就顿时感觉页面小清晰了。

(2)Gecko也推出了自己的抗锯齿效果的非标定义。

  • moz-osx-font-smoothing: inherit | grayscale;这个属性也是更清晰的作用。

例子:

.icon { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

©著作权归作者所有:来自51CTO博客作者mb607558ea4fef1的原创作品,如需转载,请注明出处,否则将追究法律责任

更多相关文章

  1. 一个可能让你的页面渲染速度提升数倍的CSS属性
  2. 一些鲜为人知的的CSS3属性
  3. Python的hasattr() getattr() setattr() 函数使用方法详解
  4. es6 javascript的class类中的 get和set
  5. 前端170面试题+答案学习整理
  6. 数组,对象,传参解构; 访问器属性的get,set
  7. position和float属性详解
  8. js2 解构,访问器属性
  9. JS中的值传递,模板字面量,数组、对象、传参解构,访问器属性

随机推荐

  1. android操作sqlite3的blob字段
  2. : Failed to read row 0, column -1 from
  3. 安卓自学,手机上的横竖屏切换,状态栏隐藏
  4. Xcode 4.2 编译 Android
  5. 进程博客纳入
  6. Android(安卓)- 销毁指定Activity
  7. android常用控件(二)
  8. 基本Dalvik VM调用
  9. Android AVD启动失败
  10. Android签名验证简介