有幾種方法可以用來指定 Web 頁面上的字體尺寸。首先,你可以使用關鍵字,比如small 或者 large;其次,你還可以使用固定的量度,比如象素(pixel)或點陳(point);或者你還可以使用相對量度,比如 em 或者百分比。關鍵字簡單易用,但是缺乏靈活性和精確性,固定量度可能會比較精確,但是對於那些想根據自己的需要和偏好來調整字體尺寸的用戶來說,可能會帶來一些易用性問題。相對量度可以解決這一易用性問題,但是也會帶來它們自己的問題。
應該可行的方法
相對量度能夠指定字體的尺寸比一些標准的參考尺寸大多少或者小多少。使用百分比設定字體尺寸能夠字體尺寸表示為參考字體的字符框高度(字母字符的頂部到字母字符的底部之間的距離)的一個百分比。
Em 是基於排版轉換的一種量度,它定義1em為參考字體的大寫字母的高度。出於與其它量度保持一致性的考慮,CSS 定義1em為字符框的高度。以 em 表示的尺寸是十進制小數或者參考字體尺寸的倍數。因此,2em和200%是一樣的,而.75em和75%也表示同樣的尺寸。
理論上,使用相對量度來指定字體尺寸不論對於 Web 開發人員還是對於 Web 用戶都具有明顯地優勢。通過將字體尺寸指定為標准參考尺寸的一個相對變化值,你可以將焦點集中在尺寸關系上,而無須用特定的數字為每個字體樣式指定一個尺寸。
如果更改參考字體的尺寸,所有以相對量度指定的字體都會相應地調整尺寸,以維護其與參考字體的尺寸比值。這就意味著 Web 開發人員只要更改 body 標簽一個地方的字體尺寸就可以更改整個頁面上所有的字體尺寸。相似地,這種方法還允許訪問者調整他們的浏覽器的字體尺寸設置,進而調整浏覽器窗口中字體的尺寸,而且也不會丟失相對字體尺寸能夠傳達的任何意義。
天堂中的麻煩
不幸的是,理論上聽起來很合理的東西,實際用的時候總是不會那麼好。使用相對量度來設置字體尺寸時的一個主要問題是參考字體尺寸缺乏一致的標准。基於 Windows 操作系統的浏覽器的傳統的默認字體尺寸是16像素,並且假設屏幕的分辨率是每英寸96象素。而在蘋果機上,傳統的默認字體尺寸是12象素,屏幕的分辨率是每英寸72象素。
雖然 Windows 的默認字體尺寸是推薦的官方標准,但是很多鐵桿蘋果用戶(其中包括很多 Web 開發人員)繼續使用傳統的蘋果默認設置。這些設置趨向於錯誤地誘導蘋果用戶對“normal(普通)”字體尺寸的印象。這對於使用任何方式指定字體尺寸的 Web 開發人員來說都是一個問題,但是對於采用相對量度來指定字體尺寸的 Web 開發人員來說這個問題尤為嚴重,因為當顯示字體的尺寸與普通尺寸離的較遠時,標准參考字體尺寸的一點差別都會被誇大很多。
采用相對字體尺寸的另外一個主要問題是基於浏覽器默認字體尺寸的所有的尺寸計算都不是必須的,即使對於在 body 標簽中指定的字體也是這種情況。相反,所有相對尺寸都是基於父元素的字體尺寸來計算的。這就會使事情變得很復雜,因為元素可以嵌套,而且通常會嵌套的很深。例如,你的一段文字可以位於一個 div 中的另一個 div 中的一個 table 的一個 cell 中。如果在每一級都使用相對量度來指定字體尺寸,那麼相對量度可能會相互混合,導致字體尺寸比你所期望的要大的多或小的多。
對嵌套元素應用相對尺寸所產生的組合效果可能會導致相對字體尺寸難於使用,容易把人搞糊塗。最壞的情況是,不同的浏覽器識別父元素的方式不同,因此以哪種字體尺寸作為相對尺寸的參考尺寸也會不同。通常,Netscape 4.x 是差別最大的浏覽器,但是在當前的浏覽器中依然還有非常多的不一致性會頻繁地引起相對字體尺寸的問題。
當好心沒有取得好的效果時
相對字體尺寸是一個非常偉大的想法,因為對於 Web 開發人員來說它同時解決了用戶易用性和設計靈活性的問題。為了成功地使用相對字體尺寸來設置字體,你需要非常細心地計劃你的頁面設計和 CSS 樣式,以避免嵌套元素所帶來的潛在問題。你可以做到這一點,但是事實並不像你想象地那麼容易,而且它還對你的設計選項強加了相當大的限制。否則,你需要依賴關鍵字或者絕對量度來設置字體尺寸