详解CSS3中字体平滑处理和抗锯齿渲染


Posted in HTML / CSS onMarch 29, 2017

在围观Drupal官方主题的时候,发现了一个有意思的非标准CSS选择器-webkit-font-smoothing,于是上手把玩了一番。如何使用css3字体平滑显示呢

要知道,W3C对CSS中字体的抗锯齿渲染是有过考虑的,如font-smooth,不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异,总之,他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持,来让字体显示的更加平滑。

-webkit-font-smoothing主要有一下三个属性:

1、none: 无抗锯齿

2、subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows

3、antialiased: 灰度平滑 常用于Android和iOS等移动设备的

不过经过尝试,我的木头眼睛完全分辨不出后两个的区别。 而且这个非标准的CSS只适用于大多数的手机浏览器及Safari和Chrome之类的WebKit内核的桌面浏览器。至于IE系列嘛,你自己不支持,怪我咯~

这里看看实际效果吧,首先是没有采用抗锯齿渲染的:

详解CSS3中字体平滑处理和抗锯齿渲染

接下来是采用-webkit-font-smoothing: subpixel-antialiased抗锯齿渲染平滑处理后的效果:

详解CSS3中字体平滑处理和抗锯齿渲染

可以看出来,字体边缘的光滑程度还是不一样的,加上后确实好看了不少。

经过测试发现,浏览器的内置基础属性中一般已经包含了字体抗锯齿。但是为了保险起见,还是手动加上一个吧~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
CSS3制作hover下划线动画
Mar 27 #HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 #HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 #HTML / CSS
CSS3实现头像旋转效果
Mar 13 #HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 #HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 #HTML / CSS
You might like
php 无限分类的树类代码
2009/12/03 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
优化javascript的执行速度
2010/01/23 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python链接Oracle数据库的方法
2015/06/28 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python实现控制台打印的方法
2019/01/12 Python
django使用xadmin的全局配置详解
2019/11/15 Python
如何通过python实现全排列
2020/02/11 Python
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
运动会通讯稿150字
2014/02/15 职场文书
烹饪自我鉴定
2014/03/01 职场文书
师范生自荐信模板
2014/05/28 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2015年父亲节寄语
2015/03/23 职场文书
新年晚会开场白
2015/05/29 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python