CSS知識點之字型大小屬性font-size

忘塵天外天發表於2017-07-12

  管理文字的大小在 web 設計領域很重要。但是,不應當通過調整文字大小使段落看上去像標題,或者使標題看上去像段落。請始終使用正確的 HTML 標題,比如使用 <h1> - <h6> 來標記標題,使用 <p> 來標記段落。

  font-size 值可以是絕對或相對值。

絕對值:

  將文字設定為指定的大小

  不允許使用者在所有瀏覽器中改變文字大小(不利於可用性)

  絕對大小在確定了輸出的物理尺寸時很有用

相對大小:

  相對於周圍的元素來設定大小

  允許使用者在瀏覽器改變文字大小

注意:如果您沒有規定字型大小,普通文字(比如段落)的預設大小是 16 畫素 (16px=1em)。

使用畫素來設定字型大小

  通過畫素設定文字大小,可以對文字大小進行完全控制:

在 Firefox, Chrome, and Safari 中,可以重新調整以上例子的文字大小,但是在 Internet Explorer 中不行。雖然可以通過瀏覽器的縮放工具調整文字大小,但是這實際上是對整個頁面的調整,而不僅限於文字。

使用 em 來設定字型大小

  如果要避免在 Internet Explorer 中無法調整文字的問題,許多開發者使用 em 單位代替 pixels。W3C 推薦使用 em 尺寸單位。1em 等於當前的字型尺寸。如果一個元素的 font-size 為 16 畫素,那麼對於該元素,1em 就等於 16 畫素。在設定字型大小時,em 的值會相對於父元素的字型大小改變。

  瀏覽器中預設的文字大小是 16 畫素。因此 1em 的預設尺寸是 16 畫素。可以使用下面這個公式將畫素轉換為 em:pixels/16=em(注:16 等於父元素的預設字型大小,假設父元素的 font-size 為 20px,那麼公式需改為:pixels/20=em

相關文章