css字體

一.首先介紹一下px

px就是css中最基本的長度單位了，用px作單位基本上沒什麼問題，能夠作到讓頁面按套路精確的展示！

可可是！但但是！若是全篇用px佈局會暗藏一個蛋疼的問題，就是當用戶和Ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，所以有磚家倡導使用em替代px。。。。。

二.接下來介紹一下em

若是你從上到下閱讀此文，你應該已經知道了em出現的緣由，下面說說em的特性，簡單的講px是絕對單位，1px就是1px，2px就是2px，以此類推，而em是相對單位，em相對的基準點就是瀏覽器的字體大小，瀏覽器默認字體大小是16px，也就是1em默認等於16px，若是你想給某個文字設定爲14px，就這樣寫 font-size:0.875em; 公式是14/16=0.875em，若是想要15px，那麼就是15/16=0.938em, 例如margin:0.938em; 依次類推，樣式表都用em來寫的話，就能夠解決ctrl+，ctrl-時

這時候有人和我同樣就會抱怨了，個人數學是體育老師教的，除以16我怎麼可能算明白，那好辦你能夠在根節點上重定義基準字號 html {font-size:62.5%} ，此時頁面基準字號就是 16px * 62.5% = 10px , 那麼此時 1em = 10px，那麼此時14px = 1.4em，15px=1.5em，依次類推，就算你數學是要飯的教的應該也會算了吧-。-！

可可是！但但是！問題又來了，em準確的說是相對於父節點的字號來計算的，若是自身定義了字號那麼就相對自身字號來計算，舉例以下：

html { font-size: 100%; }.box-0 {    height: 1em; /* 此時height等於16px */}.box-1 {     font-size: 0.625em; /* 此時基準字號以變動爲16*0.625=10px */     height: 1em; /* 此時實際height等於10px */}

看明白了吧，在整個頁面內1em並非一個固定不變的值，1em不停的變換，再加上數學是體育老師教的，這不是自做孽嗎。。。不要緊，css3爲咱們引入一個新的單位就是rem能夠解決這個問題

三.最後介紹一下主角rem

rem和em同樣也是一個相對單位，爲了方便理解，咱們就理解rem爲root em，顧名思義rem只相對跟節點計算，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同em，默認1rem=16px; 同理你能夠設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推。。。

聲明一下：rem是css3屬性，沒錯！這就是說屌絲ie678不支持rem屬性，只有chrome、firefox等高富帥支持！那麼咱們就在ie678中用px作兼容處理，例如：

.box {    font-size: 14px; /* 用來兼容ie678 */    font-size: 0.875em; }

 0101後花園使用的WordPress 3.5.1所引用的style.css正是使用的這種方式。

因爲做者的語文也是體育老師教的，因此有言語不通之處敬請見諒，還請指正！3Q！

形成的頁面錯亂問題,經常使用em