揭秘CSS(第 1 版)
3.1.7 字体调整
阅读(

概述

CSS选择器

字体和文本

字体

字体拉伸

字体变形

字体风格

字体粗细

字体大小

字体系列

字体调整

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

一种字体的 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 所示:

不同字体的显示尺寸
图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属性调整后效果
图3-9 使用font-size-adjust属性调整后效果

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验