在CSS中，通過 font-size屬性來設定元素中所包含文字的字型大小。如果一個元素沒有顯式定義font-size屬性，則會自動繼承父元素的 font-size屬性的計算結果。

定義 font-size 時，可以使用預定義關鍵字、絕對尺寸、相對尺寸：

1）預定義關鍵字

預定義關鍵字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按順序依次增大，類似於衣服的尺寸。

使用預定義關鍵字有兩大缺陷：一是隻有 7 種選擇，可選擇範圍太小；二是跟衣服的尺寸一樣，不同廠商對每個關鍵字對應的字型大小的精確值可能各不不同，導致在不同瀏覽器下，文字的大小可能不同。因此，不推薦使用預定義關鍵字來定義字型的大小。

2）絕對尺寸

絕對尺寸有px（畫素）、pt（點，1pt 相當於 1/72in）、in（英寸）、cm（釐米）、mm（毫米）等。如：

1. .px {
2. font-size:14px;
3. }
4. .pt {
5. font-size:10pt;
6. }
7. .in{
8. font-size:.15in;
9. }
10. .cm {
11. font-size:.4cm;
12. }
13. .mm {
14. font-size:4mm;
15. }

1. <pclass="px">字型大小： 14px</p>
2. <pclass="pt">字型大小： 10pt</p>
3. <pclass="in">字型大小： .15in</p>
4. <p
   class="cm">字型大小： .4cm</p>
5. <pclass="mm">字型大小： 4mm</p>

上述程式碼定義了 5 種字型大小，都使用絕對單位。使用絕對長度單位後，在固定解析度的顯示器下，顯示出來的都是固定大小。執行結果如圖 3‑1 所示：

如果以 px 為單位設定字型大小，使用IE瀏覽器的使用者，就不能在瀏覽器上通過設定“文字大小”來對文字進行放大或縮小。如果文字太小，就會影響閱讀，使使用者體驗大打折扣。

3）相對尺寸

相對尺寸有 em、%、rem，它們都是相對於某個參考基準的字型大小，來計算當前字型的大小，只是參考基準不同而已。

em 的參考基準是父元素。那麼，如何計算要指定的 em 值呢？實際上，1em 總是等於父元素 font-size屬性的值，這就是 em 的工作原理。據此，可以通過以下公式來確定百分比的值：

目標元素的字型大小 / 父元素的字型大小 = 值

因此，在使用 em 定義字型大小時，最好在 html 或 body 元素上建立一個基準。假設在 body 中設定的基準大小為 12px：

1. body {
2. font-size:12px;
3. }

如果希望 body 中所有段落的字型大小為 18px，根據上述公式：

18 / 12 = 1. 5

因此，只需將將段落的 font-size 設定為 1.5em 就可以了，這條規則就表示段落文字的字型大小為父元素文字大小的1.5 倍：

1. body p {
2. font-size:1.5em;
3. }

% 的參考基準也是父元素，100% 也總是等於父元素 font-size屬性的值，即 1em 就等於 100%。也就是說，在用 % 定義字型大小時，只需將 em 的值換算成相應的百分數即可。因此，以下兩條宣告會得到相同的結果（假設兩個段落具有相同的父元素）：

1. p.one {
2. font-size:1.5em;
3. }
4. p.one {
5. font-size:150%;
6. }

需要注意的是，儘管 font-size 是可以繼承的，但在使用 % 和 em 定義字型大小時，子元素繼承的是計算結果的值，而不是 % 和 em 的數字。並且，% 和 em 還可以累積。考慮以下程式碼：

1. p {
2. font-size:12px;
3. }
4. em {
5. font-size:200%;
6. }
7. strong {
8. font-size:200%;
9. }

1. <p>12px <em> 200% <strong> 200% </strong></em></p>

上述程式碼中，p 為父元素，em 為 p 的子元素，strong 為 em 的子元素。em 元素的基準是 p 元素，而 strong 元素的基準是 em 元素。計算結果如下：

em：12 × 200% = 24px

strong：24 × 200% = 48px

得到的執行結果如圖 3‑2 所示：

在這種多層巢狀的情況下，如果某一個計算結果不是整數，瀏覽器可能就會取整，子元素再繼承取整後的值。如果巢狀很深，下層的字型大小就越來越偏離實際計算值。並且，由於參考基準總是隨著元素髮生變化，巢狀越深，計算起來也就越困難。

鑑於此，CSS3中新增的一個相對單位 rem（root em的簡稱），它總是以文件的根元素（即 html 元素）為參考基準，來設定其它元素的字型大小，即 1rem 相當於 html 元素 font-size屬性的值。考慮以下程式碼：

1. html {
2. font-size:10px;
3. }
4. p {
5. font-size:1.4rem;
6. }

上述宣告中，p 元素的字型大小將是 html 字型大小的1.4倍，則計算得到 p 元素的字型大小就是1.4 × 10px = 14px。

這樣一來，無論巢狀多少層，參考基準始終不變，計算字型大小就變得容易多了。不過，需要注意的是，rem 是CSS3新增的一個相對單位，IE9 以下版本的老瀏覽器卻不支援它，這也是很多程式設計人員尚未使用 rem 的原因。

在定義字型大小時，筆者建議在 html 元素中定義絕大多數元素所需要的字型大小，並讓所有子元素繼承 html 的字型大小。如果某個子元素需要要改變字型大小，則使用相對尺寸 em 或 % 或 rem 重新定義。

這樣做的好處是，一方面，絕大多數元素都不必定義字型大小，減少不必要的定義；另一方面，如果完成所有的文字排版後，又要統一調整頁面文字大小，就可以只修改 html 中的字型大小，其它所有文字的字型大小會自動變化，修改起來就很容易。

說明：

在某些特殊場景下，需要把 font-size 的值設定為0，來隱藏某些文字。但是，在IE6和IE7中，font-size: 0 的文字卻變成了小黑點，並沒有完全隱藏。

解決這個問題的最簡單辦法，就是在 font-size: 0 的同時，把 text-indent 屬性設定為一個很大的負值，讓這些文字顯示在螢幕之外，自然就被隱藏起來。