CSS 字體大小

字體大小

font-size 屬性設置文本的大小。

在網頁設計中，能夠管理文本大小很重要。但是，不應使用調整字體大小來使段落看起來像標題，或是使標題看起來像段落。

請始終使用正確的 HTML 標簽，例如 <h1> - <h6> 用于標題，而 <p> 僅用于段落。

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

絕對尺寸：

  • 將文本設置為指定大小
  • 不允許用戶在所有瀏覽器中更改文本大小（可訪問性不佳）
  • 當輸出的物理尺寸已知時，絕對尺寸很有用

相對尺寸：

  • 設置相對于周圍元素的大小
  • 允許用戶在瀏覽器中更改文本大小

注釋：如果您沒有指定字體大小，則普通文本（如段落）的默認大小為 16px（16px = 1em）。

以像素設置字體大小

使用像素設置文本大小可以完全控制文本大小：

實例

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

親自試一試

提示：如果您使用了像素，則仍然可以使用縮放工具來調整整個頁面的大小。

用 em 設置字體大小

為了允許用戶調整文本大小（在瀏覽器菜單中），許多開發人員使用 em 而不是像素。

W3C 建議使用 em 尺寸單位。

1em 等于當前字體大小。瀏覽器中的默認文本大小為 16px。因此，默認大小 1em 為 16px。

可以使用這個公式從像素到 em 來計算大小：pixels/16=em。

實例

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

親自試一試

在上例中，em 單位的文本大小與上一個例子中的像素大小相同。但是，若使用 em 尺寸，則可以在所有瀏覽器中調整文本大小。

不幸的是，舊版本的 Internet Explorer 仍然存在問題。放大文本時它比應該大的尺寸更大，縮小文本時會更小。

使用百分比和 Em 的組合

實例

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

親自試一試

我們的代碼目前運行良好！它在所有瀏覽器中顯示相同的文本大小，并允許所有瀏覽器縮放或調整文本大小！

響應式字體大小

可以使用 vw 單位設置文本大小，它的意思是“視口寬度”（"viewport width"）。

這樣，文本大小將遵循瀏覽器窗口的大小，請調整瀏覽器窗口的大小，以查看字體大小如何縮放：

實例

<h1 style="font-size:10vw">Hello World</h1>

親自試一試

視口（Viewport）是瀏覽器窗口的大小。 1vw = 視口寬度的 1％。如果視口為 50 厘米寬，則 1vw 為 0.5 厘米。