確定字體大小的方法對我們來說既很熟悉，也有很大不同。

與font-weight關鍵字bolder和lighter的方式類似，屬性font-size也有兩個相對大小關鍵字：larger和smaller。類似于相對字體加粗，這些關鍵字會導致font-size的計算值上移或下移，在討論larger和smaller之前需要先了解這一點。不過，首先需要分析如何確定字體的大小，實際上，font-size屬性與你看到的實際字體大小之間的具體關系由字體的設計者來確定。這種關系設置為字體本身中的一個em方框（有人也稱之為em框）。這個em方框（以及相應的字體大?。┎灰欢ㄖ甘咀煮w中字符建立的任何邊界。相反，它指示如果沒有額外行間距（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規(guī)范，一個絕對大小與下一個絕對大小之間的差別（或縮放因子）應當是向上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稍微大一點?？s放的程度由用戶代理決定，往往就是縮放因子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度量時，會應用百分數的相同規(guī)則，如計算大小的繼承規(guī)則等等。

字體大小和繼承

盡管在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）

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

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

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

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

如果有人認為用戶代理每一步都完成取整，那么這個計算和前一個計算的最終結果是一樣的：都是19像素。不過，如果與更多的百分數相乘，取整錯誤就會開始積累。

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

ul (font-size: 80%;}

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

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

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

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