确定字体大小的方法对我们来说既很熟悉，也有很大不同。

与font-weight关键字bolder和lighter的方式类似，属性font-size也有两个相对大小关键字：larger和smaller。类似于相对字体加粗，这些关键字会导致font-size的计算值上移或下移，在讨论larger和smaller之前需要先了解这一点。不过，首先需要分析如何确定字体的大小，实际上，font-size属性与你看到的实际字体大小之间的具体关系由字体的设计者来确定。这种关系设置为字体本身中的一个em方框（有人也称之为em框）。这个em方框（以及相应的字体大小）不一定指示字体中字符建立的任何边界。相反，它指示如果没有额外行间距（CSS中的line-height）设置字体时基线间的距离。某种字体的字符可能比默认的基线间距离要高，这是完全有可能的。出于这种原因，定义字体时可能要求所有字符都小于其em方框，很多字体就是这样做的。

因此，font-size的作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。

绝对大小

有了以上了解，现在来看绝对大小关键字。font-size有7个绝对大小值：xx-small、 x-small, small, medium, large, x-large和xx-large。这些关键字并没有明确地定义，而是相对地来定义。

p.one {font-size: xx-small;}

p.two {font-size: x-small;}

p.three {font-size: small;}

p.four {font-size: medium;}

p.five {font-size: large;}

p.six:{font-size: x-large;}

p.seven {font-size: xx-large;}

根据CSS1规范，一个绝对大小与下一个绝对大小之间的差别（或缩放因子）应当是向上1.5，或向下0.66。因此，如果medium等于10px，那么large就应当等于15px。另一方面，缩放因子不一定非得是1.5，不仅因为对于不同的用户代理缩放因子可能不同，此外还有一个原因：CSS2中缩放因子可能介于1.0-1.2之间。

假设medium等于16px，在此基础上，对于不同的缩放因子，可以得到表5-3所示的绝对大小（当然，下面的值是近似的）。

在不同的网页浏览器将“默认”字体大小指定为不同的绝对关键字时，情况会更复杂。以版本4的浏览器为例：Navigator 4认为medium与无样式文本的字体大小相同，而Internet Explorer 4则认为small文本与无样式文本的大小相同。尽管font-style的默认值一般认为是medium，但IE4的行为可能不正确，不过没有最初看起来那么严重（注1）[1]。幸运地是，IE6修正了这个问题，至少浏览器在标准模式时会把medium作为默认大小。

相对大小

相对来讲，关键字larger和smaller很简单：这两个关键字使元素的大小相对于其父元素的大小在绝对大小梯度上上移或下移，在此会使用计算绝对大小时采用的缩放因子。换句话说，如果浏览器使用缩放因子1.2来计算绝对大小，那么在应用相对大小关键字时也应当使用同样的缩放因子：

p {font-size: medium;}

strong, em {font-size: larger;}

<p>This paragraph element contains <strong>a strong-emphasia element which itself contains <em>an emphasis element that also contains <strong>a strong element.</strong></em></strong></p>

<p> medium <strong>large <em> x-large <strong>xx-large</strong></em></strong></p>

不同于加粗的相对值，相对大小值不必限制在绝对大小范围内。因此，一个字体的大小可以超过xx-small和xx-large的大小。例如：

h1 {font-size: xx-large;}

em {font-size: larger;}

<h1>A Heading with <em>Emphasis</em> added</h1>

<p>This paragraph has some <em>emphasis</em> as well.</p>

如图5-11所示，h1元素中的强调文本比xx-large稍微大一点。缩放的程度由用户代理决定，往往就是缩放因子1.2。当然，段落中的em文本会在绝对大小梯度上上移一步（large）。

注意：网页浏览器不需要将字体大小增加或减少到超出绝对大小关键字的限制。

百分数和大小

在某种程度上讲，百分数值与相对大小关键字很相似，百分数值总是根据从父元素继承的大小来计算。不同于相对大小关键字，百分数允许对计算的字体大小有更细的控制。考虑以下例子，如图5-12所示：

body {font-size: 15px;}

这个例子中显示了具体的像素大小值。实际中，Web浏览器很可能将这个值取整为与之最接近的整数像素，如14px，不过高级用户代理在打印文档时会近似小数像素，或者可能通过反混淆（anti-aliasing）来近似小数像素。对于其他font-size值，浏览器可能保留小数（也可能不保留）。

有时，CSS定义长度值em等价于百分数值，即确定字体大小时1em等于100%。因此，以下会得到相同的结果（假设两个段落有相同的父元素）：

p.one {font-size: 166%;}

p.two {font-size: 1.6em;}

在使用em度量时，会应用百分数的相同规则，如计算大小的继承规则等等。

字体大小和继承

尽管在CSS中font-size是可以继承的，不过继承的是计算值而不是百分数，如图5-12 所示。因此，strong元素继承的值是12px，根据声明值135%，继承的这个值修改为16.2px （这很可能取整为16px）。对于“脚注”段落，百分数相对于由body元素继承的font-size值来计算，即15px。将这个值乘以75%就得到11.25px,

与相对大小关键字一样，百分数可以积累。因此，以下标记显示为如图5-13所示：

p {font-size: 12px;}

em {font-size: 120%;}

strong (font-size: 135%;}

<p>This paragraph contains both<em>emphasis and <scrong>strong 

emphasis</strong></em>, both of which are larger than the paragraph text.</p>

<p> 12px <em>14.4px <strong> 19.44px </strong></em> 12px </p>

图5-13中strong元素的大小值计算如下：

12 px x 120%= 14.4px

14.4px x 135%= 19.44px （可能取整为19px）

不过，这只是一种候选情况，最终值可能稍有不同

。在这种情况下，用户代理对像素大小进行取整，取整后的值再由子元素正常继承。尽管根据规范这种行为可能并不正确，不过我们假设用户代理会这么做。因此，会有：

12px x 120%= 14.4px [14.4px ≈ 14px]

14px x 135%= 18.9px [18.9px ≈ 19px]

如果有人认为用户代理每一步都完成取整，那么这个计算和前一个计算的最终结果是一样的：都是19像素。不过，如果与更多的百分数相乘，取整错误就会开始积累。

缩放失控的问题还可能朝着另一个方向发展。下面来考虑一个文档，这个文档中只有一系列无序列表，其中很多列表嵌套在另外的一些列表中。有些列表的嵌套多达4层。假设对这样一个文档应用以下规则，可以想象一下最后的效果：

ul (font-size: 80%;}

对于一个4层嵌套，嵌套最深的无序列表的font-size计算值将是顶层列表父元素大小的40.96%。每个嵌套列表的字体大小都是其父列表字体大小的80%，这就导致一层比一层难读。如果一个文档使用嵌套表来建立布局，也可能发生类似的问题。你可能会把规则写作：

td {font-size: 0.8em;}

不论怎样，都可能得到一个无法阅读的页面。

使用长度单位

可以使用第4章详细讨论的任何长度值来设置font-size。以下所有font-size声明都是等价的：

p.one (font-size: 36pt;}

p.two {font-size: 3pc;}

p.three {font-size: 0.5in;}

p.four (font-size: 1.27cm;}

p.five {font-size: 12.7mm;}

图5-14假设用户代理知道显示媒体中毎英寸使用多少点。不同的用户代理会做不同的假设，有些基于操作系统，有些基于首选顶设置，还有些会基于编写用户代理的程序员的假设。不过，这5行应该始终有相同的大小。因此。尽管结果与现实可能不能完全匹配（例

如，p.three的实际大小可能不是半英寸）。但是度量彼此之间是一致的。

还有一个值可能与图5-14所示大小相同，即36px，如果显示媒体是72 ppi (pixels-per-inch，每英寸像素数），那么物理距离就可能一样。不过，有这种设置的显示器并不多。大多数显示器都有更高的分辨串，范围为96ppi-120ppi。许多较老的Macintosh Web浏览器把点和像素看成是一样的，所以在这些浏览器上，值14pt和14px看上去可能一样。不过，对于Windows和其他平台（包括Mac OS X）却不是这样。正因如此（这是一个主要原因），所以我们说在文档设计中点很难使用。