確定字體大小的方法對(duì)我們來(lái)說(shuō)既很熟悉，也有很大不同。

與font-weight關(guān)鍵字bolder和lighter的方式類(lèi)似，屬性font-size也有兩個(gè)相對(duì)大小關(guān)鍵字：larger和smaller。類(lèi)似于相對(duì)字體加粗，這些關(guān)鍵字會(huì)導(dǎo)致font-size的計(jì)算值上移或下移，在討論larger和smaller之前需要先了解這一點(diǎn)。不過(guò)，首先需要分析如何確定字體的大小，實(shí)際上，font-size屬性與你看到的實(shí)際字體大小之間的具體關(guān)系由字體的設(shè)計(jì)者來(lái)確定。這種關(guān)系設(shè)置為字體本身中的一個(gè)em方框（有人也稱(chēng)之為em框）。這個(gè)em方框（以及相應(yīng)的字體大?。┎灰欢ㄖ甘咀煮w中字符建立的任何邊界。相反，它指示如果沒(méi)有額外行間距（CSS中的line-height）設(shè)置字體時(shí)基線間的距離。某種字體的字符可能比默認(rèn)的基線間距離要高，這是完全有可能的。出于這種原因，定義字體時(shí)可能要求所有字符都小于其em方框，很多字體就是這樣做的。

因此，font-size的作用是為給定字體的em框提供一個(gè)大小，而不能保證實(shí)際顯示的字符就是這種大小。

絕對(duì)大小

有了以上了解，現(xiàn)在來(lái)看絕對(duì)大小關(guān)鍵字。font-size有7個(gè)絕對(duì)大小值：xx-small、 x-small, small, medium, large, x-large和xx-large。這些關(guān)鍵字并沒(méi)有明確地定義，而是相對(duì)地來(lái)定義。

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;}

根據(jù)CSS1規(guī)范，一個(gè)絕對(duì)大小與下一個(gè)絕對(duì)大小之間的差別（或縮放因子）應(yīng)當(dāng)是向上1.5，或向下0.66。因此，如果medium等于10px，那么large就應(yīng)當(dāng)?shù)扔?5px。另一方面，縮放因子不一定非得是1.5，不僅因?yàn)閷?duì)于不同的用戶(hù)代理縮放因子可能不同，此外還有一個(gè)原因：CSS2中縮放因子可能介于1.0-1.2之間。

假設(shè)medium等于16px，在此基礎(chǔ)上，對(duì)于不同的縮放因子，可以得到表5-3所示的絕對(duì)大?。ó?dāng)然，下面的值是近似的）。

在不同的網(wǎng)頁(yè)瀏覽器將“默認(rèn)”字體大小指定為不同的絕對(duì)關(guān)鍵字時(shí)，情況會(huì)更復(fù)雜。以版本4的瀏覽器為例：Navigator 4認(rèn)為medium與無(wú)樣式文本的字體大小相同，而Internet Explorer 4則認(rèn)為small文本與無(wú)樣式文本的大小相同。盡管font-style的默認(rèn)值一般認(rèn)為是medium，但I(xiàn)E4的行為可能不正確，不過(guò)沒(méi)有最初看起來(lái)那么嚴(yán)重（注1）[1]。幸運(yùn)地是，IE6修正了這個(gè)問(wèn)題，至少瀏覽器在標(biāo)準(zhǔn)模式時(shí)會(huì)把medium作為默認(rèn)大小。

相對(duì)大小

相對(duì)來(lái)講，關(guān)鍵字larger和smaller很簡(jiǎn)單：這兩個(gè)關(guān)鍵字使元素的大小相對(duì)于其父元素的大小在絕對(duì)大小梯度上上移或下移，在此會(huì)使用計(jì)算絕對(duì)大小時(shí)采用的縮放因子。換句話說(shuō)，如果瀏覽器使用縮放因子1.2來(lái)計(jì)算絕對(duì)大小，那么在應(yīng)用相對(duì)大小關(guān)鍵字時(shí)也應(yīng)當(dāng)使用同樣的縮放因子：

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>

不同于加粗的相對(duì)值，相對(duì)大小值不必限制在絕對(duì)大小范圍內(nèi)。因此，一個(gè)字體的大小可以超過(guò)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元素中的強(qiáng)調(diào)文本比xx-large稍微大一點(diǎn)?？s放的程度由用戶(hù)代理決定，往往就是縮放因子1.2。當(dāng)然，段落中的em文本會(huì)在絕對(duì)大小梯度上上移一步（large）。

注意：網(wǎng)頁(yè)瀏覽器不需要將字體大小增加或減少到超出絕對(duì)大小關(guān)鍵字的限制。

百分?jǐn)?shù)和大小

在某種程度上講，百分?jǐn)?shù)值與相對(duì)大小關(guān)鍵字很相似，百分?jǐn)?shù)值總是根據(jù)從父元素繼承的大小來(lái)計(jì)算。不同于相對(duì)大小關(guān)鍵字，百分?jǐn)?shù)允許對(duì)計(jì)算的字體大小有更細(xì)的控制?？紤]以下例子，如圖5-12所示：

body {font-size: 15px;}

這個(gè)例子中顯示了具體的像素大小值。實(shí)際中，Web瀏覽器很可能將這個(gè)值取整為與之最接近的整數(shù)像素，如14px，不過(guò)高級(jí)用戶(hù)代理在打印文檔時(shí)會(huì)近似小數(shù)像素，或者可能通過(guò)反混淆（anti-aliasing）來(lái)近似小數(shù)像素。對(duì)于其他font-size值，瀏覽器可能保留小數(shù)（也可能不保留）。

有時(shí)，CSS定義長(zhǎng)度值em等價(jià)于百分?jǐn)?shù)值，即確定字體大小時(shí)1em等于100%。因此，以下會(huì)得到相同的結(jié)果（假設(shè)兩個(gè)段落有相同的父元素）：

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

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

在使用em度量時(shí)，會(huì)應(yīng)用百分?jǐn)?shù)的相同規(guī)則，如計(jì)算大小的繼承規(guī)則等等。

字體大小和繼承

盡管在CSS中font-size是可以繼承的，不過(guò)繼承的是計(jì)算值而不是百分?jǐn)?shù)，如圖5-12 所示。因此，strong元素繼承的值是12px，根據(jù)聲明值135%，繼承的這個(gè)值修改為16.2px （這很可能取整為16px）。對(duì)于“腳注”段落，百分?jǐn)?shù)相對(duì)于由body元素繼承的font-size值來(lái)計(jì)算，即15px。將這個(gè)值乘以75%就得到11.25px,

與相對(duì)大小關(guān)鍵字一樣，百分?jǐn)?shù)可以積累。因此，以下標(biāo)記顯示為如圖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元素的大小值計(jì)算如下：

12 px x 120%= 14.4px

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

不過(guò)，這只是一種候選情況，最終值可能稍有不同

。在這種情況下，用戶(hù)代理對(duì)像素大小進(jìn)行取整，取整后的值再由子元素正常繼承。盡管根據(jù)規(guī)范這種行為可能并不正確，不過(guò)我們假設(shè)用戶(hù)代理會(huì)這么做。因此，會(huì)有：

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

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

如果有人認(rèn)為用戶(hù)代理每一步都完成取整，那么這個(gè)計(jì)算和前一個(gè)計(jì)算的最終結(jié)果是一樣的：都是19像素。不過(guò)，如果與更多的百分?jǐn)?shù)相乘，取整錯(cuò)誤就會(huì)開(kāi)始積累。

縮放失控的問(wèn)題還可能朝著另一個(gè)方向發(fā)展。下面來(lái)考慮一個(gè)文檔，這個(gè)文檔中只有一系列無(wú)序列表，其中很多列表嵌套在另外的一些列表中。有些列表的嵌套多達(dá)4層。假設(shè)對(duì)這樣一個(gè)文檔應(yīng)用以下規(guī)則，可以想象一下最后的效果：

ul (font-size: 80%;}

對(duì)于一個(gè)4層嵌套，嵌套最深的無(wú)序列表的font-size計(jì)算值將是頂層列表父元素大小的40.96%。每個(gè)嵌套列表的字體大小都是其父列表字體大小的80%，這就導(dǎo)致一層比一層難讀。如果一個(gè)文檔使用嵌套表來(lái)建立布局，也可能發(fā)生類(lèi)似的問(wèn)題。你可能會(huì)把規(guī)則寫(xiě)作：

td {font-size: 0.8em;}

不論怎樣，都可能得到一個(gè)無(wú)法閱讀的頁(yè)面。

使用長(zhǎng)度單位

可以使用第4章詳細(xì)討論的任何長(zhǎng)度值來(lái)設(shè)置font-size。以下所有font-size聲明都是等價(jià)的：

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假設(shè)用戶(hù)代理知道顯示媒體中毎英寸使用多少點(diǎn)。不同的用戶(hù)代理會(huì)做不同的假設(shè)，有些基于操作系統(tǒng)，有些基于首選頂設(shè)置，還有些會(huì)基于編寫(xiě)用戶(hù)代理的程序員的假設(shè)。不過(guò)，這5行應(yīng)該始終有相同的大小。因此。盡管結(jié)果與現(xiàn)實(shí)可能不能完全匹配（例

如，p.three的實(shí)際大小可能不是半英寸）。但是度量彼此之間是一致的。

還有一個(gè)值可能與圖5-14所示大小相同，即36px，如果顯示媒體是72 ppi (pixels-per-inch，每英寸像素?cái)?shù)），那么物理距離就可能一樣。不過(guò)，有這種設(shè)置的顯示器并不多。大多數(shù)顯示器都有更高的分辨串，范圍為96ppi-120ppi。許多較老的Macintosh Web瀏覽器把點(diǎn)和像素看成是一樣的，所以在這些瀏覽器上，值14pt和14px看上去可能一樣。不過(guò)，對(duì)于Windows和其他平臺(tái)（包括Mac OS X）卻不是這樣。正因如此（這是一個(gè)主要原因），所以我們說(shuō)在文檔設(shè)計(jì)中點(diǎn)很難使用。