英文原文地址：http://clagnut.com/blog/348/
譯者注：原文寫於2004年，但裏面提到的IE不支持文本縮放的問題直到IE9還是存在。
屏幕文本的尺寸在CSS中是用pixel、em或者關鍵詞來設置的。衆所周知，用pixel來設置尺寸很簡單：給選擇器添加font-size屬性值即可。用關鍵詞來設置尺寸稍顯複雜，需要採用幾個變通的方法，但幸運的是有篇文章對其進行詳細的講解。現在來說說em這個單位。目前大家對它是唯恐避之不及：“em這個單位使用時效果前後不統一，晦澀難用。”很多人可能都會這麼認爲。但如果你僅僅是因爲害怕改變而懷有這種想法，接下來你會發現em也不是那麼難掌握的。下文將講述如何像使用pixel般輕鬆高效地使用em。
爲什麼要使用em這個單位？
如果條件允許，使用pixel也不錯。但現實不允許我們這麼做，我們還有個垃圾瀏覽器要應付──Windows的IE瀏覽不允許用戶對用pixel定義的文本進行縮放。不管你怎麼想，用戶有時確實需要對文本進行縮放：或許他們是近視眼，或者是在做展示，或者他們的屏幕分辨率過高，甚至可能只是因爲他們眼睛痠痛。除非你能確保用戶不會使用IE瀏覽器或者不會縮放文本，否則使用pixel作爲尺寸單位就不是一個可行的方案。
用關鍵詞作爲尺寸單位能讓瀏覽器縮放文本，但它無法提供pixel一般精確的控制。使用em則不但能讓瀏覽器縮放文本，也會提供pixel般精確的尺寸控制，所以它向來是我的首選。
開始學習使用em
讓我們開始學習使用em。我會從零開始，教你怎麼用em設置文本尺寸。我會假設你瀏覽的字號被設置爲“中”，現代瀏覽器的“中”字號的默認值都是16px。第一步是將body標籤的字體尺寸值設置爲62.5%，這樣子整個文檔的字體尺寸也會相應減少。
譯者注：10 / 16 * 100 = 62.5%。對body標籤施加這個尺寸樣式時，由於瀏覽器默認尺寸是16px， 16 * 62.5% 等於10px，也就是將body的font-size尺寸修改爲10px。
BODY {font-size:62.5%}使用em需要一個參考點，一般都是以body標籤的“font-size”爲基準。如此就將基準尺寸從16px變成了10px，便於計算。這樣子我們就以em爲尺寸單位，卻能用pixel的方式來計算了：1em等於10px，0.8em等於8px，1.6em等於16px，以此類推。如果你是用css來對頁面進行佈局的，那麼現在你或許已用幾個div標籤將其他元素包裹了起來。設置一下這個幾個div的文本尺寸就差不多完事了。假設頁面是帶頭尾部的兩欄佈局：
<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>
#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}現在頁面的導航（navigation）和側邊欄（side_bar）的文本大小是10px，內容區（main_content）是12px，尾部是9px。不過有些特殊情況需要處理一下（就算你是用的pixel，也必須進行同樣的處理）。上文main_content標籤中所有的heading標籤（從H1到H6）裏的文本在基於Mozilla的瀏覽器上都會被展示爲12px，而其他瀏覽器則會正常顯示。給所有heading標籤文本顯式地設置大小則可以保證跨瀏覽器一致性。例如：
H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */對錶單和表格也需要進行類似處理以確保表單控件和表格單元格繼承正確的尺寸（主要是爲解決IE的問題）：
INPUT, SELECT, TH, TD {font-size:1em}接下來要進行最後一步調整，這一步是最麻煩的：處理嵌套元素。在之前製作頁面頭部的教程裏我們學習過，現在我們來更加深入的瞭解一下。先把body標籤的文本尺寸更改爲10px，即是它默認尺寸的 75% ：
16 x 0.625 = 10
然後內容區（main_content）文本尺寸應該爲12px，然後不做更改的話，內容區文本尺寸會被展示爲10px，因爲它繼承了其父元素body標籤的屬性。這意味着使用em時是基於父元素的文本尺寸來調整文本大小的：
child pixels / parent pixels = child ems（子元素pixel值 / 父元素pixel值 = 子元素em值）
12 / 10 = 1.2
接着將H1標題設置爲24px大小。H1標籤的父元素是名爲main_content的div標籤，其文本尺寸爲12px。要將標題的文本尺寸變成24px就必須將其變成雙倍，所以em尺寸爲：
24 / 12 = 2
照着這種方式繼續往下，當開始應用類似這樣的樣式規則時就開始變得有點難度了：
#main_content LI {font-size:0.8333em}上述規則表明內容區（main_content）裏的列表項的文本尺寸爲10px，計算公式爲：
10 / 12 = 0.8333
但如果這個列表裏面包含了另外一個列表時會如何？另外一個列表的文本尺寸變得更小了。爲何如此？因爲上述規則的意思是“任何在內容區（main_content）裏的列表項的文本尺寸是其父標籤文本尺寸的0.8333倍”。所以我們需要多添加一條規則，防止它繼承了父標籤的屬性後文本尺寸相應縮小：
LI LI {font-size:1em}這條規則表明嵌套在一個列表裏的列表，其文本尺寸與其父元素相同（另外一個列表）。在開發中我經常將多個子選擇器組合在一條聲明中：
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}在使用em進行尺寸設置時，記住這條規則：文本尺寸是基於其父元素進行設置的。用這條公式進行計算：
child pixels / parent pixels = child ems（子元素pixel值 / 父元素pixel值 = 子元素em值）
一些有用的工具
Pixy的list computed styles是查看文本尺寸（或其他任何css屬性）層疊規則的神器。Mozilla的DOM檢查器則更爲強大，它可以查看當前元素受到哪些CSS規則的影響及其層疊優先級，這樣子你就可以看到文本尺寸樣式規則是如何作用的了。
最後來給EM下一個定義
最常用的定義是：em是文字排版單元（也就是文字）佔據的水平空間距離，是一種相對的測量尺寸單位。1em的距離等同於該文本尺寸的大小。也就是說對於10px的字體來說，1em等於10px；而18px的1em就等於18px。因此任何文本1em內邊距的大小都是其文本尺寸的1倍。
