• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > 详解CSS3中字体平滑处理和抗锯齿渲染

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

作者:朱昆 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css3动画详解,css3 锯齿,css3 锯齿边框,css3教程,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抗锯齿渲染平滑处理后的效果:

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

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

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

</div>

您可能想查找下面的文章:

  • 详解CSS3中字体平滑处理和抗锯齿渲染
  • 详解CSS3中nth-child与nth-of-type的区别
  • 详解CSS3浏览器兼容
  • 详解CSS3阴影 box-shadow的使用和技巧总结
  • CSS3 box-sizing属性详解
  • CSS3的column-fill属性对齐列内容高度的用法详解
  • 详解CSS3的图层阴影和文字阴影效果使用
  • CSS3中设置3D变形的transform-style属性详解
  • 详解CSS3的box-shadow属性制作边框阴影效果的方法
  • CSS3 display知识详解

相关文章

  • 2017-06-02利用CSS3实现文本框的清除按钮相关的一些效果
  • 2017-06-02CSS3绘制超炫的上下起伏波动进度加载动画
  • 2017-06-02实列教程 一款基于jquery和css3的响应式二级导航菜单
  • 2017-06-02纯css3实现鼠标经过图片显示描述的动画效果
  • 2017-06-02一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
  • 2017-06-02CSS3实现各种图形的示例代码
  • 2017-06-02CSS3实现多重边框的方法总结
  • 2017-06-02CSS3盒子模型详解
  • 2017-06-02使用CSS3的::selection改变选中文本颜色的方法
  • 2017-06-02CSS3旋转——彩色扇子兼容firefox浏览器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3教程(10):CSS3 HSL声明设置颜色
    • 用CSS禁用输入法(CSS3 UI规范)实例解析
    • CSS3绘制圆角矩形的简单示例
    • CSS3中文字镂空、透明值、阴影效果设置示例小结
    • 使用css3制作登录表单的步骤
    • css3实现背景图片拉伸效果像桌面壁纸一样
    • 带有css3动画效果的兼容多浏览器简单导航条示例
    • Css3新特性应用之形状总结
    • CSS3实现鼠标悬停显示扩展内容
    • css3实现一款模仿iphone样式的注册表单

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有