CSS字體大小: em與px、pt、百分比之間的對比

原文：kyleschaeffer.com

CSS樣式最混亂的一個方面是應用程序中文本擴展的font-size屬性。在CSS中,你能夠用四個不一樣的單位度量來顯示在web瀏覽器中的文本 大小。這四個單位哪種最適合Web? 這個問題引發了普遍的爭論。找到一個肯定的答案是困難的, 由於這個問題,自己就是如此難以回答。

接觸這些單位

 1. 「Ems」(em):「em」是一個可伸縮的單位, 用於web文檔媒體展現。一個em等於當前的字體大小,例如,若是文檔的字體大小是12 pt,1 em等於12 pt。Ems在本質上是可伸縮的,因此2 em至關於24 pt，.5 em至關於6 pt等。ems因爲其可伸縮性和適應移動設備的特性在web文檔中正變得愈來愈受歡迎。

2. 像素(px):像素是固定大小的單元,用於屏幕媒體(即在電腦屏幕上讀取)。一個像素等於電腦屏幕上的一個點 (是你屏幕分辨率的最小分割)。許多網頁設計師在web文檔使用像素單位以生產瀏覽器渲染的像素完美呈現的網站。像素單元的一個問題是,它沒有爲視障讀者 的擴展,以適應移動設備。

3. 點(pt):點一般用於印刷媒體(任何打印在紙上的媒體,等等)。一個點等於一英寸的1/72。點更像像素,他們是固定大小的單位,不能伸縮。

4. 百分比(%):百分比單位更像「em」單位,除了一些根本性的差別。首先,當前的字體大小等於100%(好比12 pt = 100%)。當使用百分比單位,你的文字在移動設備上仍然保持徹底的可伸縮性和可訪問性。

那麼，區別是什麼呢?

　　當你動態地觀察他們就很容易理解字體大小單位之間的區別。通常來講,1 em = 12 pt = 16 px = 100%。當使用這些font-size, 增長基礎本字體大小(使用CSS選擇器)從100%到120%，讓咱們看看會發生什麼。

　　正如你所看到的, 隨着基本字體大小增長em和百分比單位變大,但px 和 pt 沒有變化。爲你的文本設置一個絕對的大小很容易,但它是更容易在你的訪客使用可伸縮的文本,能夠顯示任何設備或機器上。出於這個緣由,em和百分比單位是web文檔文本的首選。

em和percent的對比

　　咱們定義點和像素單位不必定是最適合web文檔,留下來是的em和百分比單位。在理論上,em和百分比單位是相同的,但在應用程序中,他們實際上有一些細微的差異須要着重考慮。

　　在上面的示例中,咱們使用百分比單位做爲咱們的基礎字體大小(body上標記)。若是你把你的字體大小從百分比變爲ems(即body{font- size:1 em;}),你可能不會注意到有什麼差異。讓咱們看看當「1 em」是咱們的body字體大小,當客戶端改變瀏覽器的「文字大小」設置(這在一些瀏覽器中可用,如Internet Explorer)會發生什麼。

　　當客戶端的瀏覽器文本大小設置爲「medium」, ems和百分比之間沒有區別。然而,當設置改變,差異是至關大的。「Smallest」設置,ems比百分比小得多,而當設置爲「Largest」,這時 偏偏相反,ems比百分比顯示地更大。有些可能會說,當真正去擴展時em單位在擴展,在實際的應用程序中,em文本尺度變化太大, 在一些客戶端機器上最小的文本變得不是很清晰。

結論

　　理論上,em單位是網上新的和即將到來的字體大小標準,但在實踐中,百分比單位彷佛給用戶提供一個更加一致的和可訪問的顯示。當客戶端設置改變,百分比文本以合理的比例擴展,容許設計師保持可讀性,可訪問性和視覺設計。

贏家:百分比(%)。

附錄(2011年1月)

　　從我寫這篇文章已經有幾年了,我想總結那段時間所發生的討論。通常來講,當我開始一個新的設計,我將在body元素上使用百分比(body { font-size: 62.5%; })，而後使用em單位大小來比較。只要body使用百分比單位設置,您能夠選擇使用百分比或ems或其餘任何CSS規則和選擇器而且在你的基礎字體大小 上保持使用百分比的好處。在過去的幾年中,這確實成爲設計的標準。

　　像素如今被認爲是可接受的字體大小單位(用戶可使用瀏覽器的「縮放」功能讀小文本),雖然因爲移動設備很是高的密度屏幕(一些Android和 iPhone設備每英寸超過200到 300個像素,讓你11 - 12-pixel字體很難看到!)他們也開始引發一些問題。所以,我將繼續使用百分比做爲web文檔中的基礎字體大小。一如既往,鼓勵和歡迎討論和想法， 感謝在過去的兩年裏關於這個問題的全部評論！