3.1.7 字体调整

设计师也会经常遇到一种情况，就是精心设计好的页面，如果改变字体的种类，页面上使用该字体的文本尺寸将发生变化，从而导致原来安排好的页面产生混乱，这是设计者不愿意看到的结果。

一种字体的 x-height（即，小写字母 'x' 的高度）与 font-size 高度的比值，称作该字体的 aspect值，它决定了文本的显示尺寸。

在相同的 font-size 取值下，字体拥有的 aspect 值越大，文本的显示尺寸就越大，就越容易阅读。

如，Verdana 字体的 aspect 值是0.58，Times 字体的 aspect 值是 0.46。也就是说，当 font-size 为 100px 时，Verdana 字体的 x-height 是 58px，而 Times 字体的 x-height 是 58px，这就意味着 Verdana 字体比 Times 字体更易阅读。

在指定字体时，出于安全考虑，人们通常会为一个元素指定多种字体，希望当首选字体不可用时，让浏览器自动使用备选字体。

如，以下样式将 Verdana 字体作为段落的首选字体，当 Verdana 字体不可用时，则使用 Georgia 字体，当 Georgia 字体不可用时，则使用 Times 字体：

p {    font-family: Verdana, Georgia，Times;}

由于 Georgia 和 Times 字体比 Verdana 字体的 aspect 值要小，当使用备选字体时，必然会影响文本的易读性，甚至导致页面布局产生混乱。

为了避免这种情况，在CSS 3中，新增加了 font-size-adjust属性。目前，仅得到 Firefox 浏览器的支持。

实际应用中，只需把 font-size-adjust属性的值，设置为首选字体的 aspect 值，就可以保证使用备选字体后，文本的显示尺寸不发生变化。

设置 font-size-adjust属性后，浏览器将不再使用所设置的 font-size 属性的值来显示文本，而是根据 font-size-adjust属性、font-size 属性的值，及备选字体的 aspect 值，重新计算文本的 font-size 值，并用这个计算值来显示文本。计算公式如下：

c  =  ( a / a' ) s

其中：

c  =  实际使用的 font-size 值

a  =  font-size-adjust属性的值，即首选字体的 aspect 值

a'  =  备选字体的 aspect 值

s  =  font-size 属性的值

也就是说，假设首选字体 Verdana 不可用时，浏览器将使用 Times 字体，只需为使用 Times 字体的元素设置 font-size-adjust属性，并设置为首选字体的 aspect 值，就可以保证使用备选字体后，文本的显示尺寸不发生变化：

p {    font-family: Verdana, Times;     font-size-adjust: 0.58;}

设置 font-size-adjust属性后，在渲染页面时，浏览器将执行以下步骤，来计算备选字体实际所使用的 font-size 值：

1）查得 font-size-adjust属性的值为 0.58。

2）查得备选字体 Times 的 aspect 值为 0.46。

3）将 0.58 除以 0.46，得到近似值 1.26。

4）再将 100 乘以1.26，得到 font-size 的计算值 126px。

然后，浏览器将使用 font-size 的计算值 126px 来显示备选字体，也就是说，100px 的Verdana字体跟 126px 的 Times 字体的显示尺寸相当。

除了让备选字体和首选字体具有相同的显示尺寸外，还有一种情况，就当两种字体并存且都可用时，也可以通过font-size-adjust属性，让它们具有相同的显示尺寸。

假设在一个段落中有两个 span 元素，为了方便对比，在每个 span 元素中包含一个小写字母 'b'：

<p><span>b</span><span>b</span></p>

两个 span 元素的字体大小都是 100px，而它们使用的字体不同，第一个 span 元素使用 Verdana 字体，第二个 span 元素使用 Times 字体：

p {    font-size: 100px;}span:nth-child(1) {    font-family: Verdana;}span:nth-child(2) {    font-family: Times;}

上述代码的运行结果如图 3‑8 所示：

从上图可以看出，即便使用相同的 font-size，由于 font-family 的不同，文本在浏览器中的显示尺寸也会不同，右侧 Times 字体的文本，显然比左侧 Verdana 字体的文本要小。

同理，可以把一个元素的 font-size-adjust属性，设置为期望字体的 aspect 值，就可以保证它和期望字体具有相同的显示尺寸。

如，希望第二个 span 元素中文本，与第一个 span 元素中文本的显示尺寸相同，就要把第二个元素的 font-size-adjust属性，设置为 Verdana 字体的 aspect 值：

span:nth-child(2) {    font-family: Times;    font-size-adjust: 0.58;}

运行结果如图 3‑9 所示：

从上图可以看出，使用 font-size-adjust属性调整后，两种字体就具有相同的显示尺寸，就能保证在改变字体时，不会影响文本的易读性，也不会导致页面混乱。