CSS網頁設計字體大小(em)探討

2024-07-11 08:24:59

字體：大中小

來源：轉載

供稿：網友

相關文章：CSS教程：簡單理解em
秦歌(YanKaven)的站點：http://dancewithnet.com/
今天是 Firefox3的2008下載日，這就意味著Firefox3正式發布了。Firefox3有眾多的改進和新功能，我最關注的功能之一是 “全頁面縮放（Full page zoom）” 。這就意味著Firefox3和Opera以及IE7 都可以讓用戶“完全控制顯示內容的大小同時自動調整頁面布局和結構”，說白了就是可以讓整個頁面直接放大或縮小卻不會亂掉。這就意味著我們不用再考慮為了可訪問性而整個頁面是基于字體大小（em）的布局了。
在CSS中，有兩種單位。一種是絕對長度單位，包括英寸(in)、厘米(cm)、毫米(mm)、點(pt)和派卡(pc)。另一種是相對長度單位，包括em、ex和像素(px)。ex由于在實際應用中需要獲取x大小，因瀏覽器對此處理方式非常粗糙而被拋棄(更多內容可以參考Eric A. Meyer的《CSS權威指南》)，所以現在的網頁設計中對大小距離的控制使用的單位是em和px（當然還有百分數值，但它必須是相對于另外一個值的）。
在css中，1個“em”定義為一種給定字體的font-size值。所以1em可能隨元素的不同而不同，它會相對于父元素字體大小而改變。在常見瀏覽器下，默認字體的大小為16px。常見有兩種方法來進行網頁設計：

這樣雖然省去了設置默認字體的大小，但是偶爾卻為嚴格尺寸設計帶來麻煩，比如你要設置那個寬為974px的容器#wrapper就會遇到此類麻煩。其實第一種方法也會遇到類似麻煩，只不過比第二種少些。
基于字體大小的設計好處很明顯，當用戶調整瀏覽器默認字體的大小時，字體和頁面會隨之縮放，能夠滿足挺這種方法的人常說的一個優點就是弱視的人可以通過放大字體來看清楚頁面內容，增強了頁面的可訪問性。
每個屏幕都有分辨率，比如1280×1024分辨率時屏幕就有1280×1024個點，這每個點就是一個像素(px)。所以利用px來設計網頁，不存在em那種相對于父元素字體大小變化而變化的問題。而實際上絕大部分的站點設計都是基于px設計的。在Windows平臺下IE7之前都無法通過調整瀏覽器中的“字體大小”來調整文本大小，非IE瀏覽器可以，但實際上是一般基于px的頁面，一旦僅僅調整了文本大小頁面就會亂掉（在Firefox 2下觀看除中國雅虎外的門戶網站，調整一下字體大小就了解了）。

上一篇：如何實現FireFox文本自動換行

下一篇：CSS教程：行高line-height屬性(2)