详解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气泡提示框
Mar 16 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
详解flex:1什么意思
Jul 23 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
第八节--访问方式
2006/11/16 PHP
Windows下的PHP5.0详解
2006/11/18 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python操作Jira库常用方法解析
2020/04/10 Python
keras slice layer 层实现方式
2020/06/11 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
初一家长会邀请函
2014/01/31 职场文书
信访工作个人总结
2015/03/03 职场文书
首都博物馆观后感
2015/06/05 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
《打电话》教学反思
2016/02/22 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript