摘要：所以，在網(wǎng)頁字體中，使用和單位是更好的解決方案。一般來說，我在開始寫網(wǎng)頁的時候，會設(shè)置標(biāo)簽的字體大小為這樣標(biāo)簽就是百分比的單位，然后再網(wǎng)頁接下來使用單位。

在CSS樣式中，當(dāng)文本縮放的時候使用font-size屬性是最難以理解的方面之一。在CSS中，你有4種不同的選擇，能夠讓你設(shè)置文本在瀏覽器中的展示。那么這4種單位哪一種更適合呢？這個問題引發(fā)了各種各樣不同的爭論和評價。想要找到一個比較權(quán)威的回答可能比較困難，因?yàn)檫@個問題比較難回答。

PS: 半年前只翻譯啦一半，半夜打開一看原文突然就想把剩下的翻譯啦~里面有一些自己的觀點(diǎn)描述，如果有錯誤請您留言給我，一定修正。

"Ems"(em): "em"是被用于網(wǎng)頁文件媒介的可縮放的單位（即相對單位）。1em就等于當(dāng)前字體的大小，舉個例子來講，如果文檔中字體的大小為12pt，那么1em = 12pt。Ems擁有能夠縮放的特點(diǎn)，所以2em = 24pt，0.5em = 6pt（你也可以使用原文中的.5em，但是我覺得0.5em的可讀性更好）等等。

Pixels(px): 像素是被用于屏幕媒介（在計算機(jī)屏幕上讀取）的固定大小的單位（即絕對單位）。1像素表示電腦屏幕中的1個點(diǎn)（這是你的屏幕能夠識別的最小單位）。在設(shè)計網(wǎng)頁的時候，很多web設(shè)計者采用像素，因?yàn)樗軌蚝芫_的在瀏覽器中渲染網(wǎng)頁。但是，使用像素作為單位，當(dāng)近視的用戶（或者視力不好的用戶）放大正在瀏覽的網(wǎng)頁或者在移動端縮小網(wǎng)頁到合適的尺寸，都會呈現(xiàn)一些問題。

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

Percent(%): 百分比單位和"em"單位很像，但是存在著細(xì)微的不同。首先也是最重要的不同，就是在font-size = 100%（比如：12pt = 100%）的時候。當(dāng)使用百分比單位，你的文本完全能在移動端正常訪問。

當(dāng)你在實(shí)際效果中看它們，能夠很容易理解它們之間的不同點(diǎn)。一般來講，1em = 12pt = 16px = 100%。讓我們看看將基本字體大小（body中字體大?。?00%增加到120%之后，它們有什么不同。
測試代碼：（這里使用設(shè)置div中字體大小來做測試，代碼位于文章末尾：例子1-1）

(由于這里不涉及字體設(shè)計的講解，設(shè)置了內(nèi)邊距等樣式便于比較，但是不影響差異的判斷)

正如你所看到的，em和percent單位當(dāng)基礎(chǔ)font-size增加的時候，對應(yīng)的字體大小也相對增加；但是px和pt單位卻沒有反應(yīng)。對文本設(shè)置絕對大小很容易，但對于你的用戶要縮?。ɑ蛘叻糯螅┪谋?，用于在一些設(shè)備或者機(jī)器中正常顯示的時候就不是很好。所以，在網(wǎng)頁字體中，使用em和percent單位是更好的解決方案。

我們發(fā)現(xiàn)pt和px字體單位不是適應(yīng)Web文檔必須選擇的單位（其實(shí)從作者的語氣中并沒有表現(xiàn)出使用px單位不好的意思），我們還有em和百分比作為字體的單位。從理論上來說，em和百分比單位都是相同的（指的都是相對單位），但是在實(shí)際的使用中，他們會有細(xì)微的不同之處，這些不同之處對于我們在選擇字體單位的時候是比較重要的。

從例子1-1中，我們可以看出，我們用了“font-size: 100%“來作為我們的基本單位（作用在body標(biāo)簽上）。如果你改變上面代碼中基本單位的font-size: 100%為font-size: 1em（body { font-size: 1em; }），你可能不容易發(fā)現(xiàn)改變前后的不同之處。讓我們看看改變成em單位后，在改變?yōu)g覽器文本大小的設(shè)置后在一些瀏覽器上的效果。（文章中作者只說了存在于某些瀏覽器中，我就測試了一下chrome和ie6/7/8/9/10，發(fā)現(xiàn)只有ie6會出現(xiàn)作者描述的不清晰和不一致的效果），效果如下圖所示：（測試代碼位于文章末尾：例子1-2）

在IE6中的設(shè)置地方如下，設(shè)置中，字體大小為中的時候渲染效果比較好。

當(dāng)瀏覽器字體大小設(shè)置為“中”的時候，em和百分比之間幾乎沒有差異。但是當(dāng)字體大小改變?yōu)槠渌档脮r候差異就比較明顯。當(dāng)“最小”的情況下：em渲染的字體比百分比的更小；當(dāng)“最大”的情況下：差異相當(dāng)?shù)拿黠@，em渲染的字體比百分比的更大。雖然部分人認(rèn)為em單位縮放的方式是他們真正想要的，但是在實(shí)際的應(yīng)用中，em文本的縮放是超出預(yù)期的，在某些用戶設(shè)備中，“最小”字體大小的情況下會導(dǎo)致字體模糊難以閱讀的情況（其實(shí)有點(diǎn)違背網(wǎng)頁可讀性一條吧）。

從理論上講，em單位是在web字體大小領(lǐng)域中即將到來的標(biāo)準(zhǔn)（在我這時候翻譯已經(jīng)比較流行啦），但是在實(shí)際應(yīng)用中，對于用戶來說，百分比單位能夠提供更多統(tǒng)一的和可被接受的字體渲染。當(dāng)瀏覽器設(shè)置發(fā)生改變，百分比單位的伸縮是按照一種可靠比率的方式縮放、放大的，這樣能夠提升網(wǎng)頁的可讀性，更符合設(shè)計師的設(shè)計初衷。

得出結(jié)論：贏家是“百分比”。(大家不忙噴哈，后面作者更新了現(xiàn)在流行的網(wǎng)頁字體設(shè)置方式)

當(dāng)我寫這篇文章幾年后，我想總結(jié)一下大家的討論和辯論。一般來說，我在開始寫網(wǎng)頁的時候，會設(shè)置body標(biāo)簽的字體大小為: font-size: 62.5%；這樣body標(biāo)簽就是百分比的單位，然后再網(wǎng)頁接下來使用em單位。只要body使用的百分比單位設(shè)置，你接下就可以任意的選擇em和百分比單位了，這樣做的話會保留百分比單位對于網(wǎng)頁字體渲染的好處。這這幾年里，這樣的寫法已經(jīng)成為一種標(biāo)準(zhǔn)。

px現(xiàn)在被認(rèn)為是能夠被接受的字體大小單位（使用它做單位，用戶可以使用瀏覽器的“放大”功能來讀取較小的文字） ，不過這樣做會出一些問題，當(dāng)在具有非常高密度屏幕的移動設(shè)備中（比如一些Android和iPhone設(shè)備上擁有每英寸200~300像素以上，讓網(wǎng)頁中11px和12px的字體不太擁有良好的閱讀體驗(yàn)！ ） 。因此，我將繼續(xù)使用百分比作為在Web文檔中的基本字體大小。

例子1-1：各種單位在瀏覽器中的表現(xiàn)測試代碼。

（1）HTML代碼：

    
font-size: 100%
    
em: The quick brown fox.
    
pt: The quick brown fox.
    
px: The quick brown fox.
    
percent: The quick brown fox.


    
font-size: 120%
    
em: The quick brown fox.
    
pt: The quick brown fox.
    
px: The quick brown fox.
    
percent: The quick brown fox.

（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代碼：

    
font-size: 1em
    
1em: The quick brown fox.


    
font-size: 100%
    
100%: The quick brown fox.

（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%;
}

作者文章的評論也比較精彩，能夠?qū)W習(xí)到更多 ^0^

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