在围观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. (简单) POJ 3368 Frequent values，RMQ。

    Description You are given a sequence of n integers a1 , a2 , ... , an in non-decreasing order. In ad ...

  2. iOS中GCD的使用小结

    http://www.jianshu.com/p/ae786a4cf3b1 本篇博客共分以下几个模块来介绍GCD的相关内容: 多线程相关概念 多线程编程技术的优缺点比较? GCD中的三种队列类型 Th ...

  3. MapReduce 简单的全文搜索

    上一个已经实现了反向索引,那么为什么不尝试下全文搜索呢.例如有了 Hello     file3.txt:1; MapReduce     file3.txt:2;fil1.txt:1;fil2.tx ...

  4. FZU 2098 刻苦的小芳

    这个问题转化一下就是求长度为2*n的正确括号匹配串,两个匹配的括号之间的距离不超过2*k的有几种. 假设左括号为1,右括号为-1,dp[i][j]表示长度为i的括号匹配串,前缀和为j的有几种.dp[2 ...

  5. Selenium2+Python：Webdriver API速记手册

    由于web自动化常常需要控制浏览器行为和操作页面元素,相关函数又比较多,于是再此记下一份Webdriver API查阅文档以备不时之需. 参考:虫师<Selenium2自动化测试实战>,和 ...

  6. selenium IE 浏览器驱动下载地方

    download: http://selenium-release.storage.googleapis.com/index.html

  7. PHP+AJAX 地区三级联动代码

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. gulp学习指南之CSS合并、压缩与MD5命名及路径替换

    1.引入插件 var gulp = require('gulp'), // uglify = require('gulp-uglify'), concat = require('gulp-concat ...

  9. eclipse中集成svn maven开发手册---合并主干

    如图,代码提交分支之后 右键,项目,切换到主干版本 切换回主干版本后: 更新主干版本 合并 选择merge a range of revisions,点击next 录入要合并的分支版本的路径.此处的s ...

  10. python 爬照片 模拟浏览器 先登录账号

    # -*- coding: utf-8 -*-"""Created on Mon Mar 7 10:53:40 2016 @author: root"" ...