CSS3中字体腻滑处置惩罚和抗锯齿衬着

在围观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