对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。

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;
}

(3)Ionic框架在样式中多加了一条font-smoothing: antialiased;

这是坐等font-smoothing标准化,有备无患么。

css3属性-webkit-font-smoothing的更多相关文章

  1. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  2. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  3. 【原】常见CSS3属性对ios&android&winphone的支持

    2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...

  4. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  5. IE6-8支持css3属性

    方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...

  6. 判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...

  7. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

  8. document.documentElement.style判断浏览器是否支持Css3属性

    1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAn ...

  9. 使用css3属性,大部分浏览器要识别前缀

    例如以下代码的解析 -ms-transform:rotate(7deg); -moz-transform:rotate(7deg); -webkit-transform:rotate(7deg); - ...

  10. 【css】css3属性

    1. 无需区分webkit moz等前缀的css3属性 text-shadow background 2. 需要区分前缀的css属性 border-radius box-shadow text-str ...

随机推荐

  1. Unity3D 5.x 简单实例 - 脚本编写

    1,Vector3 类型变量存储向量坐标值 Vector3.forward Vector3(0,0,1) Vector3.up Vector3(0,1,0) Vector3.right Vector3 ...

  2. 【Java每日一题】20161219

    package Dec2016; import java.util.Arrays; public class Ques1219 { public static void main(String[] a ...

  3. 安卓模拟器genymotion连接eclipse成功但是不显示其中项目

    安卓模拟器困了我两三天了,原装模拟器比较慢,忍受不了,查到安卓模拟器的神器——genymotion 按照网上的步骤一步步都安装完毕,最后打开后发现,genymotion界面里面没有找到新建的工程, 这 ...

  4. PrototypePattrn(原型模式)

    /** * * @author TMAC-J * 原型模式,可以说是简化的工厂模式 * 与工厂模式的区别是工厂模式可以生产很多的产品,而原型模式仅仅是复制而已 * 这里有一个问题:深克隆和潜克隆的问题 ...

  5. [python]初试页面抓取——抓取沪深股市交易龙虎榜数据

    [python]抓取沪深股市交易龙虎榜数据 python 3.5.0下运行 没做自动建立files文件夹,需要手动在py文件目录下建立files文件夹后运行 #coding=utf-8 import ...

  6. getElementsByTagName() 方法

    HTML DOM Document 对象 定义和用法 getElementsByTagName() 方法可返回带有指定标签名的对象的集合. 语法 document.getElementsByTagNa ...

  7. Linux0.11内核--进程调度分析之2.调度

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5596830.html ] 上一篇说到进程调度归根结底是调用timer_interrupt函数, ...

  8. iOS 10 :用 UIViewPropertyAnimator 编写动画

    英文:shinobicontrols 译文:戴仓薯 链接:http://www.jianshu.com/p/4244cf130478 [iOS 10 day by day] Day 1:开发 iMes ...

  9. iOS 疑难杂症 — — 推送本地国际化 loc-key 本地化失败的问题

    声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 一.准备 推送本地国际化官方 ...

  10. iOS 直播-网速监控

    iOS 直播-网速监控 CXNetworkSpeed.h // // CXNetworkSpeed.h // CXNetworkSpeedDemo // // Created by xubaoaich ...