簡介
這是一篇介紹如何使網站字體大小更加合理的文章,他教給我們什么才是字體標準化單位,并不是傳統的px,而是em!
典型的說，一個 em (發音為 emm) 是個垂直間距的印刷單位，是個浮動的（相對的）度量。一個 em 是一個文本尺寸的距離。 在10像素的字體里，一個 em 就是10像素。在18像素的字體里，它就是 18像素。因此， 在任何文本尺寸下，1em 的邊距都會是成比例的
如何在css中設定文本的尺寸
使用 css 指定屏幕中文本的尺寸，可以通過像素，ems，或者關鍵字。眾所周知，通過像素限定尺寸很容易：給定一個選擇器(selector) 再設置一個 font-size 即可--不用太費心思。用關鍵字限定尺寸則更加復雜而且還需要一點變通措施，但是幸運的是這項技術有完善的文檔。于是就剩下 ems 了。人們普遍不重視它。“ems 太缺乏一致性了，”他們說，“它們太難了；它們根本不管用。” 這也許算是一種常識吧，不過，如果世上真有fud（fear, uncertainty and doubt）的實際例子的話，這就是一個。我現在就讓你看看：em用起來也可以跟像素一樣簡便。
為什么要使用 ems？
如果這個世界是個理想的地方，我們將全部使用像素。但是它不是，我們需要同破爛瀏覽器斗爭。 通過像素限定尺寸的文字，ie/win 將不允許讀者其改變的大小（譯者：僅限于ie6，在ie7以上的版本，聲明成像素的文字依然可以被改變尺寸，鑒于ie6已經不在是主流瀏覽器了，作者這個2004年觀點已經過時了）。無論你是否喜歡，你的讀者在某些地方的確想要改變文本的大小。也許他們近視，正在做一個演示，正在使用一個可笑的高分辨率的手提電腦，或者就是因為眼睛累了。所以除非你知道（不是認為）你的讀者不使用 ie/win 或者從來不希望改變他們的文本大小，那么像素(pixels)仍然是個可用的解決方案。
依靠關鍵字文本尺寸的設定允許所有的瀏覽器改變文本的大小，所以這也是一種可能，但是我沒有發現它能給于我像素一般的精確。然而使用 ems， 允許所有的瀏覽器改變文本大小并且也提供了像素級別的精度，因此他們成為我單位選擇的傾向。
繼續
好，讓我們鉆進 ems。 我將粗略的展現給你如何在一篇文檔中用ems改變文本的尺寸。我將假定我們已經把瀏覽器設置成“中”文本大小。在所有現代瀏覽器中，中等大小的文本的默認尺寸是16px。我們的第一步就是要要通過將設定body的尺寸設成 62.5% 來把整個文檔的這個尺寸改小。
body {font-size:62.5%}
這會把 16px 下調至僅僅是我正在使用的 10px ， 因為它是一個漂亮的約整數，好比是這樣一個目的 - 10px 文本對于真實世界來說太小了（譯者：我不太知道怎樣翻譯這段話 ...）。從現在開始，很容易來用像素思考但是卻是用 ems 來設定文本大小的。 0.8em 是8像素， 1.6em是 16px，等等。如果你正在用css來布局你的文檔（你正在這樣做，對嗎？）那么你或許幾個div 來組合元素。將 text-size 應用到這些 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}所以這將使文檔的導航條和側邊欄的文本顯示為10px，主要內容是 12px 以及腳注為 9px。現在這兒還遺留這幾個需要被列出的異常現象（即使是使用像素，你也不得不考慮這個）。在 mozilla 系瀏覽器中，在我們前面所述的 #main_content 內，所有的標題元素中的 div 將顯示 12px，無論他們在 h1 或者 h6 中，然而就像預料中的一樣，其他的瀏覽器將標題顯示成其他的尺寸。將 text-size 應用到所有的標題中，將帶來強壯的跨瀏覽器性，比如：
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/win）:
input, select, th, td {font-size:1em}因此最終 tweak and the bit folks （譯者：不知道怎么翻譯，估計是鉆研這方的愛好者，類似于極客 geek）似乎發現了戈多的小竅門：處理嵌套元素。我們已經在標題元素上于這方面有所涉及，但是從現在開始，讓我們更仔細的的看看實際上發生了什么。首先我們將我們的 body 的文本尺寸改為10px； 相當于默認大小的 62.6%
16 x 0.625 = 10然后我們說我們主要的內容應該按照12px來顯示。如果我們什么都不做， #main_content div （譯者：id為 main_content 的 div 元素）就會顯示成10px，因為它會從 body 元素繼承字體大小。也就是說當我們使用 ems 的時候，我們總是將文本的尺寸同其父元素關聯起來。
子元素像素值 / 父元素像素值 = 子元素 ems
12 / 10 = 1.2
下面我們希望我們的標題一為 24px。 h1 的父就是 #main_content div，我們知道它是 12px。 為了讓標題為 12px，我們需要將其加倍，所以 ems 就是：
24/12 = 2
接著，這里有個小竅門，像這樣應用規則：
#main_content li {font-size:0.8333em}
這條樣式規則表示所有的 #main_content 下的列表項目將顯示成 10px。我們是通過同樣直接的數學公式得出這個值的：
10 / 12 = 0.8333
但是如果列表嵌套又會怎么樣呢？列表會越來越小。為什么？因為我們的規則明確的指出在 #main_content div 元素中的任何的列表項目都是它的父元素的 0.8333 倍。所以我們需要另外一條規則來防止這種“繼承的縮小”
li li {font-size:1em}
(譯者：這里，最好是 #main_content li li {font-size:1em}，以限定這條規則只能作用在 #main_content 下)
這就是說任何在其他列表項目內的列表項目應該保持同其父列表項目相同的尺寸。在開發期間，我通常采用一個完整的子選擇器的集合來防止混亂的發生。
li li, li p, td p, blockquote p {font-size:1em}就是這樣。當通過 ems 控制文本大小的時候有一條原則要記住：文本的尺寸要和其父親關聯，并且使用簡單的計算來做到這一點：
子元素像素值 / 父元素像素值 = 子元素 ems
一些有用的工具
pixy 的 list computed styles 是個神話般顯示文本尺寸層級（或者其他的css屬性）的書簽。mozilla’s inspector inspector （mozilla dom 查看器）是一更強大的工具，他允許你查看附加在任何元素的 css 規則以及疊層優先級，因此你能知道為什么你的文本沒有照著你的預想改變尺寸。
(譯者：這里，我強烈推薦 firebug， ie8 內置的 dom 查看器也還不錯)
最后，什么是 ems
典型的說，一個 em (發音為 emm) 是個垂直間距的印刷單位，是個浮動的（相對的）度量。一個 em 是一個文本尺寸的距離。 在10像素的字體里，一個 em 就是10像素。在18像素的字體里，它就是 18像素。因此， 在任何文本尺寸下，1em 的邊距都會是成比例的（譯者：都會是一個字）。
新聞熱點
疑難解答
