CSS字體單位

1、前言

在CSS樣式中，當文本縮放的時候使用font-size屬性是最難以理解的方面之一。在CSS中，你有4種不一樣的選擇，可以讓你設置文本在瀏覽器中的展現。那麼這4種單位哪種更適合呢？這個問題引起了各類各樣不一樣的爭論和評價。想要找到一個比較權威的回答可能比較困難，由於這個問題比較難回答。

PS: 半年前只翻譯啦一半，半夜打開一看原文忽然就想把剩下的翻譯啦~裏面有一些本身的觀點描述，若是有錯誤請您留言給我，必定修正。

2、合適的單位

**"Ems"(em): ** "em"是被用於網頁文件媒介的可縮放的單位（即相對單位）。1em就等於當前字體的大小，舉個例子來說，若是文檔中字體的大小爲12pt，那麼1em = 12pt。Ems擁有可以縮放的特色，因此2em = 24pt，0.5em = 6pt（你也可使用原文中的.5em，可是我以爲0.5em的可讀性更好）等等。

**Pixels(px): ** 像素是被用於屏幕媒介（在計算機屏幕上讀取）的固定大小的單位（即絕對單位）。1像素表示電腦屏幕中的1個點（這是你的屏幕可以識別的最小單位）。在設計網頁的時候，不少web設計者採用像素，由於它可以很精確的在瀏覽器中渲染網頁。可是，使用像素做爲單位，當近視的用戶（或者視力很差的用戶）放大正在瀏覽的網頁或者在移動端縮小網頁到合適的尺寸，都會呈現一些問題。

**Points(pt): ** Points是一直以來被用於打印媒介（打印在紙上等等）。1pt = 1/72英寸。Points和Pixels比較像，它們都是固定大小和不能縮放的單位。

**Percent(%): ** 百分比單位和"em"單位很像，可是存在着細微的不一樣。首先也是最重要的不一樣，就是在font-size = 100%（好比：12pt = 100%）的時候。當使用百分比單位，你的文本徹底能在移動端正常訪問。

3、它們有什麼不一樣呢？

當你在實際效果中看它們，可以很容易理解它們之間的不一樣點。通常來說，1em = 12pt = 16px = 100%。讓咱們看看將基本字體大小（body中字體大小）從100%增長到120%以後，它們有什麼不一樣。 測試代碼：（這裏使用設置div中字體大小來作測試，代碼位於文章末尾：例子1-1）

3. chrome v30中的效果

(因爲這裏不涉及字體設計的講解，設置了內邊距等樣式便於比較，可是不影響差別的判斷)

正如你所看到的，em和percent單位當基礎font-size增長的時候，對應的字體大小也相對增長；可是px和pt單位卻沒有反應。對文本設置絕對大小很容易，但對於你的用戶要縮小（或者放大）文本，用於在一些設備或者機器中正常顯示的時候就不是很好。因此，在網頁字體中，使用em和percent單位是更好的解決方案。

4. em與百分比的比較

咱們發現pt和px字體單位不是適應Web文檔必須選擇的單位（其實從做者的語氣中並無表現出使用px單位很差的意思），咱們還有em和百分比做爲字體的單位。從理論上來講，em和百分比單位都是相同的（指的都是相對單位），可是在實際的使用中，他們會有細微的不一樣之處，這些不一樣之處對於咱們在選擇字體單位的時候是比較重要的。

從例子1-1中，咱們能夠看出，咱們用了「font-size: 100%「來做爲咱們的基本單位（做用在body標籤上）。若是你改變上面代碼中基本單位的font-size: 100%爲font-size: 1em（body { font-size: 1em; }），你可能不容易發現改變先後的不一樣之處。讓咱們看看改變成em單位後，在改變瀏覽器文本大小的設置後在一些瀏覽器上的效果。（文章中做者只說了存在於某些瀏覽器中，我就測試了一下chrome和ie6/7/8/9/10，發現只有ie6會出現做者描述的不清晰和不一致的效果），效果以下圖所示：（測試代碼位於文章末尾：例子1-2）

在IE6中的設置地方以下，設置中，字體大小爲中的時候渲染效果比較好。

當瀏覽器字體大小設置爲「中」的時候，em和百分比之間幾乎沒有差別。可是當字體大小改變爲其餘值得時候差別就比較明顯。當「最小」的狀況下：em渲染的字體比百分比的更小；當「最大」的狀況下：差別至關的明顯，em渲染的字體比百分比的更大。雖然部分人認爲em單位縮放的方式是他們真正想要的，可是在實際的應用中，em文本的縮放是超出預期的，在某些用戶設備中，「最小」字體大小的狀況下會致使字體模糊難以閱讀的狀況（其實有點違背網頁可讀性一條吧）。

5. 做者觀點

從理論上講，em單位是在web字體大小領域中即將到來的標準（在我這時候翻譯已經比較流行啦），可是在實際應用中，對於用戶來講，百分比單位可以提供更多統一的和可被接受的字體渲染。當瀏覽器設置發生改變，百分比單位的伸縮是按照一種可靠比率的方式縮放、放大的，這樣可以提高網頁的可讀性，更符合設計師的設計初衷。

得出結論：贏家是「百分比」。(你們不忙噴哈，後面做者更新瞭如今流行的網頁字體設置方式)

6. 做者在2011年1月的補充

當我寫這篇文章幾年後，我想總結一下你們的討論和辯論。通常來講，我在開始寫網頁的時候，會設置body標籤的字體大小爲: font-size: 62.5%；這樣body標籤就是百分比的單位，而後再網頁接下來使用em單位。只要body使用的百分比單位設置，你接下就能夠任意的選擇em和百分比單位了，這樣作的話會保留百分比單位對於網頁字體渲染的好處。這這幾年裏，這樣的寫法已經成爲一種標準。

px如今被認爲是可以被接受的字體大小單位（使用它作單位，用戶可使用瀏覽器的「放大」功能來讀取較小的文字） ，不過這樣作會出一些問題，當在具備很是高密度屏幕的移動設備中（好比一些Android和iPhone設備上擁有每英寸200~300像素以上，讓網頁中11px和12px的字體不太擁有良好的閱讀體驗！ ） 。所以，我將繼續使用百分比做爲在Web文檔中的基本字體大小。

7. 附錄

例子1-1：各類單位在瀏覽器中的表現測試代碼。

（1）HTML代碼：

<div id="test1">
    <p>font-size: 100%</p>
    <p class="p1">em: The quick brown fox.</p>
    <p class="p2">pt: The quick brown fox.</p>
    <p class="p3">px: The quick brown fox.</p>
    <p class="p4">percent: The quick brown fox.</p>
</div>
<div id="test2">
    <p>font-size: 120%</p>
    <p class="p11">em: The quick brown fox.</p>
    <p class="p12">pt: The quick brown fox.</p>
    <p class="p13">px: The quick brown fox.</p>
    <p class="p14">percent: The quick brown fox.</p>
</div>

（2）CSS代碼：

/* base style */
body {
    font-size: 100%;
}
#test1, #test2 {
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
}
/* container style */
#test1 {
    font-size: 100%;
}
#test2 {
    margin-left: 50px;
    font-size: 120%;
}
/* text underline */
p {
    border-bottom: 1px solid #aaa;
}
/* main style */
/* font-size: 100% */
#test1 .p1 {
    font-size: 1em;
}
#test1 .p2 {
    font-size: 12pt;
}
#test1 .p3 {
    font-size: 16px;
}
#test1 .p4 {
    font-size: 100%;
}
/* font-size: 120% */
#test2 .p11 {
    font-size: 1em;
}
#test2 .p12 {
    font-size: 12pt;
}
#test2 .p13 {
    font-size: 16px;
}
#test2 .p14 {
    font-size: 100%;
}

例子1-2：em與百分比測試中的代碼，放在文章最後，以便你們可以更順暢的閱讀下來。

（1）HTML代碼：

<div id="test1">
    <p>font-size: 1em</p>
    <p class="p">1em: The quick brown fox.</p>
</div>
<div id="test2">
    <p>font-size: 100%</p>
    <p class="p">100%: The quick brown fox.</p>
</div>

（2）CSS代碼：

/* base style */
body {
    font-size: 1em;
}
#test1, #test2 {
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
}
/* container style */
#test1 {
}
#test2 {
    margin-left: 50px;
}
/* text underline */
p {
    border-bottom: 1px solid #aaa;
}
/* main style */
#test1 .p {
    font-size: 1em;
}
#test2 .p {
    font-size: 100%;
}

做者文章的評論也比較精彩，可以學習到更多 ^0^

英文原文做者：http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/