详解CSS3中字体平滑处理和抗锯齿渲染
发布时间：2017-03-29 17:20:49 作者：朱昆 
我要评论
我要评论本篇文章主要介绍了CSS3中字体平滑处理和抗锯齿渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
在围观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系列嘛，你自己不支持，怪我咯~
这里看看实际效果吧，首先是没有采用抗锯齿渲染的：
接下来是采用-webkit-font-smoothing: subpixel-antialiased抗锯齿渲染平滑处理后的效果：
可以看出来，字体边缘的光滑程度还是不一样的，加上后确实好看了不少。
经过测试发现，浏览器的内置基础属性中一般已经包含了字体抗锯齿。但是为了保险起见，还是手动加上一个吧~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了CSS3字体效果的设置方法小结,包括阴影效果、省略号代替以及嵌入字体,需要的朋友可以参考下2016-06-13
- rem是css3新定义的设置字体大小属性,rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放,下面就带大家来轻松掌握CSS3中的字体大小单位rem的使用方法:2016-05-24
- CSS3中的font-face可以将我们上传的自定义的字体显示出来,有时比如我们要显示英文音标的字体时便需要用到,本文就整理了一下使用CSS3的font-face字体嵌入样式的方法讲解,需2016-05-13
- 最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的字体阴影——text-shadow的使用方法。2016-01-08
- 今天给大家分享一款纯css3实现的颜色渐变按钮，这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，清新淡雅，效果非常好看，需要的朋友可以参考下2014-11-12
- 这篇文章主要介绍了css3 自定义字体font-face使用，需要的朋友可以参考下2014-05-14
- 传说中的CSS3基本上什么都可以，那么CSS3中可不可以自定义英文字体呢?答案是非常可以。用@font-face即可实现自定义英文字体，下面有个不错的示例，感兴趣的朋友可以了解下2013-09-23
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
今天就从一个简单的圆形菜单的实现，使用CSS3+font字体文件实现圆形菜单，下面来总结一些最近学习的收获，感兴趣的朋友可以参考下哈2013-06-03- 3D字体而且还带有阴影，这种效果想必大家只有认为一些高级的作图工具才可以实现的吧，css3的出现让这一切看似不可能的实现成为可能，接下来为大家介绍下3D字体带阴影效果的2013-03-20
- 网页制作Webjx文章简介：想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！ 想要制作一些很酷的头部效果而2009-04-02
最新评论