簡介

這是一篇介紹如何使網站字體大小更加合理的文章,他教給我們什么才是字體標準化單位,并不是傳統的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 將不允許讀者其改變的大?。ㄗg者：僅限于IE6，在IE7以上的版本，聲明成像素的文字依然可以被改變尺寸，鑒于IE6已經不在是主流瀏覽器了，作者這個2004年觀點已經過時了）。無論你是否喜歡，你的讀者在某些地方的確想要改變文本的大小。也許他們近視，正在做一個演示，正在使用一個可笑的高分辨率的手提電腦，或者就是因為眼睛累了。所以除非你知道（不是認為）你的讀者不使用 IE/Win 或者從來不希望改變他們的文本大小，那么像素(pixels)仍然是個可用的解決方案。

依靠關鍵字文本尺寸的設定允許所有的瀏覽器改變文本的大小，所以這也是一種可能，但是我沒有發現它能給于我像素一般的精確。然而使用 ems， 允許所有的瀏覽器改變文本大小并且也提供了像素級別的精度，因此他們成為我單位選擇的傾向。

繼續

好，讓我們鉆進 ems。 我將粗略的展現給你如何在一篇文檔中用ems改變文本的尺寸。我將假定我們已經把瀏覽器設置成“中”文本大小。在所有現代瀏覽器中，中等大小的文本的默認尺寸是16px。我們的第一步就是要要通過將設定body的尺寸設成 62.5% 來把整個文檔的這個尺寸改小。

BODY {font-size:62.5%}

這會把 16px 下調至僅僅是我正在使用的 10px ， 因為它是一個漂亮的約整數，好比是這樣一個目的 – 10px 文本對于真實世界來說太小了（