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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（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與百分比測(cè)試中的代碼，放在文章最后，以便大家能夠更順暢的閱讀下來(lái)。

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

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

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