博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3属性-webkit-font-smoothing字体抗锯齿渲染
阅读量:6119 次
发布时间:2019-06-21

本文共 707 字,大约阅读时间需要 2 分钟。

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

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标准化,有备无患么。

转载地址:http://nnmka.baihongyu.com/

你可能感兴趣的文章
Leetcode 3. Longest Substring Without Repeating Characters
查看>>
【FJOI2015】金币换位问题
查看>>
数学之美系列二十 -- 自然语言处理的教父 马库斯
查看>>
Android实现自定义位置无标题Dialog
查看>>
面试总结
查看>>
Chrome浏览器播放HTML5音频没声音的解决方案
查看>>
easyui datagrid 行编辑功能
查看>>
类,对象与实例变量
查看>>
HDU 2818 (矢量并查集)
查看>>
【转】php字符串加密解密
查看>>
22. linux 常用命令
查看>>
ASP.Net 使用GridView模板删除一行的用法
查看>>
(十六)字段表集合
查看>>
JPGraph
查看>>
实验二 Java面向对象程序设计
查看>>
------__________________________9余数定理-__________ 1163______________
查看>>
webapp返回上一页 处理
查看>>
新安装的WAMP中phpmyadmin的密码问题
查看>>
20172303 2017-2018-2 《程序设计与数据结构》第5周学习总结
查看>>
eclipse中将一个项目作为library导入另一个项目中
查看>>