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