在web中使用什麼單位來定義頁面的字型大小，至今天為止都還在激烈的爭論著，有人說px做為單位好www.cppcns.com，有人說ems優點多，還有人在說百分比方便，以至於出現了css font-size: em vs. px vs. pt vs. percent這樣的pk大局。不幸的是，仍然有不同的利弊，使各種技術都不太理想，但又無法不去用。真是進也難，退也難呀。
最近在學習em的相關知識的時候，無意之間讓我拾得一寶，就是使用rem來設定web頁面的字型大小。讓我一下子就來勁了，一口氣看完並測試了一回，還真是爽歪歪的呀。師傅說好東西不能吃獨食，於我就在這裡給大家吹吹這個從沒見過的rem。
在詳細介紹rem之前，我們先一起來回顧一下我們常用的兩種記量單位，也是備受爭論的兩個：
1.px為單位
2.em為單位
px為單位
在web頁面初期製作中，我們都是使用「px」來設定我們的文字，因為他比較穩定和精確。但是這種方法存在乙個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，他改變了瀏覽器的字型大小，這時會使用我們的web頁面布局被打破。這樣對於那些關心自己**可用性的使用者來說，就是乙個大問題了。因此，這時就提出了使用「em」來定義web頁面的字型。
em為單位
這種技術需要乙個參考點，一般都是以\
的「font-size」為基準。比如說我們使用「1em」等於「10px」來改變預設值「1em=16px」，這樣一來，我們設定字型大小相當於「14px」時，只需要將程式設計客棧其值設定為「1.4em」。
css code複製內容到剪貼簿
為什麼「li」的「1.4em」是不是「14px」將是乙個問號呢？如果你了解過「em」後，你會覺得這個問題是多問的。前面也簡單的介紹過一回，在使用「em」作單位時，一定需要知道其父元素的設定，因為「em」就是乙個相對值，而且是乙個相對于父元素的值，其真正的計算公式是：
1 ÷ 父元素的font-size 需要轉換的畫素值 = em值
這樣的情況下「1.4em」可以是「14px」,也可以是「20px」，或者說是「24px」，總之是乙個不確定值，那麼解決這樣的問題，要麼你知道其父元素的值，要麼呢在任何子元素中都使用「1em」。這樣一來可能又不是我們所需要的方法。
rem為單位
css3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在w3c官網上是這樣描述rem的——「font size of the root element」。下面我們就一起來詳細的了解rem。
前面說了「em」是相對於其父元素來設定字型大小的，這樣就會存在乙個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素\，這樣就意味著，我們只需要在根元素確定乙個參考值，，在根元素中設定多大的字型，這完全可以根據您自己的需要，大家也可以參考下圖：
我們來看乙個簡單的**例項：
css code複製內容到剪貼簿
我在根元素\中定義了乙個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以「16px」為基準
）。從上面的計算結果，我們使用「rem」就像使用「px」一樣的方便，而且同時解決了「px」和「em」兩者不同之處。
瀏覽器的相容性
rem是css3新引進來的乙個度量單位，大家心裡肯定會覺得心灰意冷呀，擔心瀏覽器的支援情況。其實大家不用害怕，你可能會驚訝，支援的瀏覽器還是蠻多的，比如：mozilla firefox 3.6+、apple safari 5+、google chrome、ie9+和opera11+。只是可憐的ixrbmlcsryre6-8無法，你們就把他們當透明了吧，我向來都是如此。
不過使用單位設定字型，可不能完全不考慮ie了，如果你想使用這個rem，但也想相容ie下的效果，可你可考慮「px」和「rem」一起使用，用"px"來實現ie6-8下的效果，然後使用「rem」來實現代瀏覽器的效果。就讓ie6-8不能隨文字的改變而改變吧，誰讓這個ie6-8這麼二呢？哈。。。。大家不仿試試，還蠻有意思，說不定這個就是主流的度量單位了。
總結一、px特點
1. ie無法調整那些使用px作為單位的字型大小；
2. 國外的大部分**能夠調整的原因在於其使用了em或rem作為字型單位；
3. firefox能夠調整px和em，rem，但是96%以上的中國網民使用ie瀏覽器(或核心)。
px畫素（pixel）。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。(引自css2.0手冊)
em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。(引自css2.0手冊)
任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。
二、em特點
1. em的值並不是固定的；
2. em會繼承父級元素的字型大小。
所以我們在寫css的時候，需要注意兩點：
1. body選擇器中宣告font-size=62.5%；
2. 將你的原來的px數值除以10，然後換上em作為單位；
3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。
也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中宣告了字型大小為1.2em，那麼在宣告p的字型大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字型高而變為了1em=12px。
三、rem特點
rem是css3新增的乙個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。
本文標題: css中的字型大小設定屬性總結
本文位址: /web/css/84524.html
20160422 css 字型大小設定
1.檔案大小與其影象解析度的平方成正比。如果保持影象尺寸不變，將影象解析度提高一倍，則其檔案大小增大為原來的四倍。計算方程式 x 長度畫素數 y 寬度畫素數 z 螢幕尺寸即對角線長度 2.一張解析度為640 x 480 30w畫素 一張解析度為1600 x 1200的，它的畫素就是200萬。3.根本...
HTML中字型大小的設定
在html中用其字型標記來修飾文字字型方面的屬性，使文字顯示更豐富。本文所要講述的就是網頁中常用的字型標記，例如乙個標題字型需要變大，並且顏色是紅色，字型類別使用黑體或楷體等。1 字型大小的設定 字型大小用畫素表示，例如 12畫素 14畫素 16畫素，一般網頁中會有乙個預設大小的畫素，如果想改變字型...
設定GUI中Label的字型大小
做 unity3d gui的時候一定會發現一般都是用gui.skin來控制gui顯示效果的，但是還會發現fontsize只能用於動態字型，當用在label和textarea中的時候顯示的字型是不會改變的 一直保持匯入字型預設大小，我在網上找了很久都沒找到有效的方法，只是通用的方法是做多個不同字型大小...