CSS3中字体平滑处理和抗锯齿渲染
来源:互联网 发布:免费视频编辑制作软件 编辑:程序博客网 时间:2024/06/08 17:20
在围观Drupal官方主题的时候,发现了一个有意思的非标准CSS选择器-webkit-font-smoothing
,于是上手把玩了一番。如何使用css3字体平滑显示呢
要知道,W3C对CSS中字体的抗锯齿渲染是有过考虑的,如font-smooth,不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异,总之,他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持,来让字体显示的更加平滑。
-webkit-font-smoothing
主要有一下三个属性:
- none: 无抗锯齿
- subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows
- antialiased: 灰度平滑 常用于Android和iOS等移动设备的
不过经过尝试,我的木头眼睛完全分辨不出后两个的区别。 而且这个非标准的CSS只适用于大多数的手机浏览器及Safari和Chrome之类的WebKit内核的桌面浏览器。至于IE系列嘛,你自己不支持,怪我咯~
这里看看实际效果吧,首先是没有采用抗锯齿渲染的:
接下来是采用-webkit-font-smoothing: subpixel-antialiased
抗锯齿渲染平滑处理后的效果:
可以看出来,字体边缘的光滑程度还是不一样的,加上后确实好看了不少。
经过测试发现,浏览器的内置基础属性中一般已经包含了字体抗锯齿。但是为了保险起见,还是手动加上一个吧~
我的个人博客,里面会有各种有意思的东西哦,欢迎关注。iamkun.com
0 0
- CSS3中字体平滑处理和抗锯齿渲染
- CSS3中字体平滑处理和抗锯齿渲染
- opengl平滑和反锯齿
- Chrome字体抗锯齿与图标字体显示异常处理
- 取消禁用WPF中默认的平滑抗锯齿
- java 绘图,平滑抗锯齿
- OpenGL ES 中抗锯齿处理
- AWT,SWT缩小图片消除锯齿的平滑处理
- Swing抗锯齿处理
- 颜色混合处理抗锯齿
- 抗锯齿处理
- CSS3文本和字体
- android中抗锯齿
- 对特定字体设置抗锯齿
- Swinghacks——抗锯齿字体
- Swinghacks——抗锯齿字体2
- Swinghacks——抗锯齿字体3
- Linux 下 netbeans 字体抗锯齿正解
- git常用操作之分支管理(五)
- 代码整洁之道(一)
- Linux shel编程之命令行参数处理
- jsp和EL的内置对象的区别
- 通过yum把PHP5.4升级到PHP5.6
- CSS3中字体平滑处理和抗锯齿渲染
- PHP的伪静态
- Win10设置开机账户为本地账户,而不是微软账户
- Eclipse的PyDev插件安装及解决安装后找不到的问题
- 6、知乎日报 API 分析
- 3.(初级)CSS继承
- GridView里添加复选款和分页功能
- eclipse新建android工程style文件里的Theme老是报错
- HandlerThread源码分析