使用 em 指定字型尺寸時的麻煩

使用 em 指定字型尺寸時的麻煩

2005-06-03 11:0 am

有幾種方法可以用來指定 web 頁面上的字型尺寸。首先，你可以使用關鍵字，比如**all 或者 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 中。如果在每一級都使用相對量度來指定字型尺寸，那麼相對量度可能會相互混合，導致字型尺寸比你所期望的要大的多或小的多。

對巢狀元素應用相對尺寸所產生的組合效果可能會導致相對字型尺寸難於使用，容易把人搞糊塗。最壞的情況是，不同的瀏覽器識別父元素的方式不同，因此以哪種字型尺寸作為相對尺寸的參考尺寸也會不同。通常，***scape 4.x 是差別最大的瀏覽器，但是在當前的瀏覽器中依然還有非常多的不一致性會頻繁地引起相對字型尺寸的問題。

當好心沒有取得好的效果時

相對字型尺寸是乙個非常偉大的想法，因為對於 web 開發人員來說它同時解決了使用者易用性和設計靈活性的問題。為了成功地使用相對字型尺寸來設定字型，你需要非常細心地計畫你的頁面設計和 css 樣式，以避免巢狀元素所帶來的潛在問題。你可以做到這一點，但是事實並不像你想象地那麼容易，而且它還對你的設計選項強加了相當大的限制。否則，你需要依賴關鍵字或者絕對量度來設定字型尺寸。

使用 em 指定字型尺寸時的麻煩

Typeface 指定字型樣式

css中字型單位px與em

css中字型單位px與em

使用 em 指定字型尺寸時的麻煩

Typeface 指定字型樣式

css中字型單位px與em

css中字型單位px與em

相關推薦