在围观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系列嘛，你自己不支持，怪我咯~

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

iamkun朱昆

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

iamkun朱昆

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

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

我的个人博客，里面会有各种有意思的东西哦，欢迎关注。iamkun.com

CSS3中字体平滑处理和抗锯齿渲染的更多相关文章

  1. CSS3属性-webkit-font-smoothing字体抗锯齿渲染

    对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服.在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多. font-smoothing是非标准的CSS定义.它被列入标准规范的草案中,后由于某些原因从 ...

  2. Qt 2D绘图之二：抗锯齿渲染和坐标系统

    一.抗锯齿渲染 1.1 逻辑绘图 图形基元的大小(宽度和高度)始终与其数学模型相对应,下图示意了忽略其渲染时使用的画笔的宽度的样子. 1.2 物理绘图(默认情况) 在默认的情况下,绘制会产生锯齿,并且 ...

  3. [Qt2D绘图]-02坐标系统&&抗锯齿渲染

    本节的内容可以在帮助中通过Coordinate System关键字查看. 或者入门可以看<Qt Creator 快速入门>这本书.强烈推荐入门使用.下面的内容为本书的阅读笔记,喜欢的可以买 ...

  4. CSS3中设置字体的抗锯齿或光滑度的属性

    刚刚接触前端开发,对于-webkit-font-smoothing: antialiased; 这个属性不了解.上网查找了一些资料. 总结一下: -webkit-font-smoothing  :  ...

  5. Linux 下 netbeans 字体抗锯齿正解

    转自:http://leenjewel.blog.163.com/blog/static/601937922010124444051/ 说来这个不难,主要是我看网上有的写的不是很明确,甚至有的写的根本 ...

  6. 字体渲染技术(字体抗锯齿技术) -webkit-font-smoothing: antialiased;

    1.-webkit-font-smoothing控制的字体渲染只对MacOS的webkit有效.所以,你在MacOS测试环境下面设置-webkit-font-smoothing时,只要你不把它设置为n ...

  7. html5--6-16 CSS3中的文字与字体

    html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...

  8. html5--6-23 CSS3中的文字与字体

    html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...

  9. html5--6-19 CSS3中的文字与字体

    html5--6-19 CSS3中的文字与字体 学习要点 掌握文字与字体的设置 颜色值查询方法: 百度查询,很多网站有提供 下载相关手册等需要时查表 运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...

随机推荐

  1. package。。

    如果在源代码内没有加上 package ... 是无法以下面的方式访问到主类的. D:\lab_>java timer.LambdaTest 加载时会返回 "错误: 找不到或无法加载主 ...

  2. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  3. (简单) POJ 2750 Potted Flower，环+线段树。

    Description The little cat takes over the management of a new park. There is a large circular statue ...

  4. ios-Ineligible Devices 不被识别的设备

    此问题大致分为几种: 1.设备不可用,出现Ineligible Devices,如下图: 此错误因为 Xcode的Deployment Target 大于设备的,选择和设备一样 或者 低于设备的.如下 ...

  5. linux下安装部署环境：jdk、tomcat、nginx

    一.安装jdk 一.查看Linux自带的JDK是否已安装 1.查看已经安装的jdk: # rpm -qa|grep jdk                ← 查看jdk的信息或直接执行 或 # rpm ...

  6. 使用flexbox来布局web应用

    使用 flexbox 可以帮助你设计出引人注目的布局,并且在pc端或移动端能够很好的缩放.告别使用浮动的 <div> 元素.绝对定位 和一些JavaScript hacks, 使用仅仅几行 ...

  7. leetcode-005 reorder list

    1 package leetcode; public class ReOrderList { public void reorderList(ListNode head) { if(head==nul ...

  8. Unity3D ——强大的跨平台3D游戏开发工具（一）

    众所周知,Unity3D是一个能够实现轻松创作的多平台的游戏开发工具,是一个全面整合的专业游戏引擎.在现有的版本中,其强大的游戏制作功能已 经达到让人瞠目结舌的地步.尤其是它在3.0版本里面制作的那款 ...

  9. Elasticsearch基础教程

    Reference: http://blog.csdn.net/cnweike/article/details/33736429 基础概念 Elasticsearch有几个核心概念.从一开始理解这些概 ...

  10. 洛谷 P1359 租用游艇

    题目描述 长江游艇俱乐部在长江上设置了n 个游艇出租站1,2,-,n.游客可在这些游艇出租站租用游艇,并在下游的任何一个游艇出租站归还游艇.游艇出租站i 到游艇出租站j 之间的租金为r(i,j),1& ...