CSS 天坑 I - 字型單位

標籤：des   style   blog   color   使用   問題   html   代碼   

首先，本文所討論的“坑”是在做回應式網頁設計( Responsive Web Design 以下簡稱 RWD）時顯現的，如果你還只是在做傳統的Web設計這算不上是一個坑，因為傳統的Web頁面是死的，不會自動調節不能適應各類裝置螢幕尺寸自然不會產生任何尺寸變化的問題。相反地，要為不同裝置上的使用者提供最好的閱讀或使用體驗我們不可避免的就是對元素或字型的尺寸的測量與控制。由其是字型的尺寸，不知道你是否有以下的經曆

同樣的一個網頁，同一份樣式表，但：

• 字型在mac 上很漂亮，但在windows很難看 ？
• 文字在PC上位置正確，但在iPad上卻錯了位 ？
• 文字塊在Chrome上長度適合，但換了FireFox卻變長了，甚至換了行 ？

 如果不幸地被言中，那麼真得好好檢查一下樣式表的字型尺寸單位與行高所使用的單位是否正確了。在CSS3中我們可以應用很多的字型單位，如： pt, px, em, rem 和百分比（這裡只討論字型單位，對於vw / vh這類元素長度單位不在此討論範疇），這些單位的具體含義是什麼，在什麼場合使用，選擇哪個單位在RWD中最為適合呢 ？那麼就先來一個一個地去瞭解它們的意義與用法再對具體應用作出選擇。 點陣單位（pt）

　　PT是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英寸。如果在web上使用pt做單位的文字，字型的大小在不同螢幕（同樣解析度）下一樣，這樣可能會對排版有影響，但在Word中使用pt相當方便。因為使用Word主要目的都不是為了螢幕瀏覽，而是輸出列印。當列印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標題用“黑體 16pt”等等，無論電腦怎麼設定，列印出來永遠就是這麼大。

可見如果將pt作為Web上的首選字型單位那就是一個大坑！pt只適用於列印與普通文檔文字排版並不適用於Web. 

像素單位 （px）

根據顯示器的解析度來確定長度，在老式web應用中多採用該單位；像素是相對於顯示器螢幕解析度而言的。譬如，WONDOWS的使用者所使用的解析度一般是96像素/英寸。而MAC的使用者所使用的解析度一般是72像素/英寸。 

兩種關係：一英寸=72pt(點)=96px(像素)，網頁中最常用到的：9pt=12px

px本身是一個極大的坑，也是最多人願意跳進去的。相對於同一解析度的螢幕它是一個具體準確的測量單位，我們用做向量圖也最喜歡使用這個單位（px值是絕對值）， 所有的瀏覽器也是預設使用px來作為尺寸的測量單位，因此在網頁設計時都會將px作為標準的尺寸單位使用。當沒有互動移連網時代，沒有RWD之前這是一個正確的選擇，但時代變了px並不能適用於可變字型尺寸的情境，使用它會產生排版的變形。 

像素單位會因螢幕解析度變化而變型，不適於用作在各種裝置上顯示的網頁的首選尺寸單位。

 相對長度單位 （em） 　　em 是一個相對於父節點尺寸的相對長度單位，可以理解為字型尺寸的百分比單位，但與百分比不同的是 em是有預設常量值的，當不明確指定父節點字型尺寸時，任意瀏覽器的預設字型高（line-height）都是16px。所以未經調整的瀏覽器都符合: 1em=16px ， 那麼12px=0.75em, 10px=0.625em。這是一個極為常用的換算公式。 em 是最適用於RWD的一種標準字型尺寸，支援字型放縮，可根據螢幕解析度以及不同瀏覽器間的顯示差異作出微調，確保字型在不同的裝置上，保持視覺與設計的一至性。值得注意的是，既然是相對單位就必定有參照物（元素），如果參照物不存在側採用16px作為真實尺寸。以此理論我們就可以為我們的網站的樣式表的最開始部分加上以下的代碼： 

html { font-size: 100%; // 通常預設值為 16px }body { font-size: 0.75em; // 12px }h1 { font-size: 2em; // 24px }

 如果我們想將1em=16px這個預設規則改變的話，如將1em=12px可以寫成這樣： 

html { font-size: 75%; // 12px }body { font-size: 1em; // 12px }h1 { font-size: 2em; // 24px }

 如果我們希望在案頭顯示的字型更為精細，而在行動裝置上顯示的字型可更為清晰的話也可以這樣來寫：

html { font-size: 75%; // 12px }@media only screen and (max-device-width: 480px) {    html { font-size: 100%; // 16px }}

 以上是舉出最簡單的例子以協助我們理解em的用法，而在實際應用中則需要解決另一方面的問題：預設元素樣式。各種瀏覽器對不同的標準元素有不同的預設樣式，由其是字型。如果要保持字型的一至性就需要在樣式表中明確地重寫這些樣式以保證瀏覽器間的相容性。如：li 的字型會按照ul的字型尺寸計算相對的大小： 

html { font-size: 75%; // 12px }body { font-size: 1em; // 12px }li { font-size: 0.833em; // 10px }

 

當然button, h1~h6, summary, detail等還有很多的元素都需要進行這個標準化的過程，如果覺得這個工作很麻煩也可以去下載著名的 normalize.css 樣式表完成這個重設工作，雖然看起來很麻煩，但是這卻可以避免在整個項目設計的過程中掉入這些由於尺寸所帶來的不必要而耗時的調整。    相對根節點長度單位 （rem）

CSS3引入新的字型尺寸單位 rem ，可以簡單記憶為root rm。

CSS3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在W3C官網上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細的瞭解rem。

em單位是相對於父節點的font-size，會有一些組合的問題，而rem是相對於根節點（或者是html節點），意思就是說你可以在html節點定義一個單獨的字型大小，然後所有其他元素使用rem相對於這個字型的百分比進行設定

 

我們來看一個簡單的代碼執行個體：

html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body { font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根項目中定義了一個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以“16px”為基準 ）。從上面的計算結果，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處。

 

如果你習慣了使用px作為測量單位而又希望可以使用到rem 這種相對單位的話 , 那麼我們可以做一個簡單的mixin：

@base-font: 12px;@mixin font-size(@font-size){    font-size: @font-size;    font-size: (@font-size/@base-font-size)*1rem;}li { font-size(10px); }

 

  關於相容性的考慮　　rem 是CSS3新引進來的一個度量單位，大家心裡肯定會擔心瀏覽器的支援情況。其實支援的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可憐的IE6-8不支援。不過使用單位設定字型，可不能完全不考慮IE了，如果你想使用這個REM，但也想相容IE下的效果，可你可考慮“px”和“rem”一起使用，用”px”來實現IE6-8下的效果，然後使用“Rem”來實現代瀏覽器的效果。