CSS font-size-adjust 属性简介

1,829 阅读2分钟

背景

写网页时,我们通常会为网页指定字体以及尺寸。

body {
  font-family: Verdana, Times;
	font-size: 20px;
}

这里将网页文字指定为 20px 大小,还使用了 Verdana, Times 的字体序列——如果当前操作系统中不包含 Verdana 字体,就回退使用 Times 字体。

一个问题是,当我们比较 20px 下的不同字体展示时,会看到明显的差异。

在线 demo

如图所示,同样是 20px 大小的字体,但是明显感觉 Times 字体的可读性比 Verdana 字体要差一些,这就带来了不一致的用户体验,给用户感觉好像是在访问两个截然不同的网站一样。

这里的问题在于,不同字体下的默认字符尺寸是不一样的。这也是为什么引入 font-size-adjust 属性的原因之一。

font-size-adjust

font-size-adjust 属性的默认值是 none,不起任何作用。它可以接收一个数值类型的值,通常介入 0 到 1之间。

比如下面这样:

body {
  font-family: Verdana, Times;
	font-size: 20px;
  font-size-adjust: 0.5;
}

来看看效果:

一个明显的变化时,虽然使用了不同的字体,但最终的展示效果跟使用 font-size-adjust 之前相比,一致了很多。

这就是使用 font-size-adjust 带来的一致性体验。

作用机制

font-size-adjust 属性用来设置字体中小写字母尺寸的,当像下面这样使用时

body {
  font-family: Verdana, Times;
	font-size: 20px;
  font-size-adjust: 0.5;
}

就表示不管出现的是 Verdana 字体,还是 Times,它们小写字母的尺寸都是 20px * 0.5,即 10px(即小写字母大小 = font-size * font-size-adjust)。

这也是为什么前面在使用 font-size-adjust 属性后,网页表现一致的原因。因为在一个英文网页中,影响网页可读性的最大因素就是大量出现的小写字母,控制了小写字母的尺寸,基本等于控制了整个全局效果了。

默认情况下,Verdana 字体的 font-size-adjust 属性值计算出来是 0.549,Times 字体的 font-size-adjust 属性值计算出来是 0.444。这也是在同时设置一样 font-size 的时候,文字看上去差别很大的原因。

(完)