非 CSS 标准的字体抗锯齿属性 -webkit-font-smoothing

yufei       2 年, 3 月 前       373

「 抗锯齿 」( 英语 anti-aliasing,简称 AA ) ,有时也称之为边缘柔化、消除混叠、抗图像折叠有损等

那么,锯齿是什么东西呢 ?

就是字体或图片的边缘会出现锯齿状而不是一条明显的线段这样。一个很简单的例子,你可以看我们本站的所有节点的投标,就是有很明显的锯齿

看到没,折线上的图片很明显的锯齿

为了消除这种锯齿,使得边缘变得平滑,就要使用一种抗锯齿的东西

CSS 中的抗锯齿

对字体进行抗锯齿可以让文字看起来更清晰和输入,尤其是图标字体越来越流行的现代网页设计。

CSS 3 的草案中本来引入了 font-smoothing 作为抗锯齿属性,但后来却移除了,不过越来越多的浏览器对这个属性提供了支持,最流行的莫过于使用 WebKit 内核的 SafariChrome

它们使用自己专有的前缀定义了一个 -webkit-font-smoothing 属性

注意: 这个属性只有在 Mac 电脑上有效,也就是 OSX 系统上有效

-webkit-font-smoothing 属性

Webkit 在自己的引擎中支持了抗锯齿效果,特意定义了 -webkit-font-smoothing 属性

语法格式如下

-webkit-font-smoothing: inherit|none|subpixel-antialiased|antialiased

各个属性值说明如下

说明
inherit 继承父辈元素的 -webkit-font-smoothing
none 不使用抗锯齿属性,一般用于低像素 ( px ) 的文本
subpixel-antialiased 默认值,次像素平滑
antialiased 抗锯齿,灰度平滑

范例,下面的 CSS 样式对所有的 p 元素添加了看锯齿属性

p { -webkit-font-smoothing:antialiased}

-moz-osx-font-smoothing

Firefox 也推出了子有前缀的抗锯齿属性,不过该属性目前只有在 OSX 电脑上才能使用

语法格式如下

-moz-osx-font-smoothing: auto | grayscale

各个属性值的说明如下

说明
auto 允许浏览器自行选择是否开启字体平滑的优化,通常是灰度
grayscale 使用灰度抗锯齿渲染文本,而不是子像素。在深色背景上从子像素渲染切换到抗锯齿,使其看起来更轻

实战

因为抗锯齿在高精度屏幕上,也就是视网膜屏幕上使用更佳,所以我们一般会如下使用抗锯齿

例如,给 p 元素添加抗锯齿

@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 2dppx){
    /* Retina下仍使用默认字体渲染 */
    p {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}

-webkit-min-device-pixel-ratio 指定 DPI 与实际像素之间的比例不低于 1.5

min-resolution: 2dppx 则指定实际最低渲染比例最低为 2dppx,目前只有视网膜屏幕

结论

有了平滑,其实在视网膜屏幕上看起来还是很爽的

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.