1. Web
  2. CSS
  3. font-size

font-size

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

font-size CSS 屬性用於設定字型大小。更改字型大小還會更新與字型大小相關的 <length> 單位（如 em、ex 等）的大小。

試一試

font-size: 1.2rem;

font-size: x-small;

font-size: smaller;

font-size: 12px;

font-size: 80%;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

語法

css
/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

/* math value */
font-size: math;

/* Global values */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

值

xx-small、x-small、small、medium、large、x-large、xx-large、xxx-large

基於使用者預設字型大小（即 medium）的絕對大小關鍵字。

larger、smaller

相對大小關鍵字。字型將相對於父元素的字型大小進行放大或縮小，其比例大致與上面用於分隔絕對大小關鍵字的比例相同。

<length>

一個正的 <length> 值。對於大多數相對於字型的單位（如 em 和 ex），字型大小是相對於父元素的字型大小。

對於基於根元素的字型相對單位（如 rem），字型大小是相對於 <html>（根）元素所用字型的大小。

<percentage>

一個正的 <percentage> 值，相對於父元素的字型大小。

備註： 為了最大限度地提高可訪問性，通常最好使用相對於使用者預設字型大小的值。

math

在確定數學元素的 font-size 屬性相對於其父容器 font-size 的計算值時，會應用縮放規則。更多資訊請參閱 math-depth 屬性。

描述

有多種方法可以指定字型大小，包括使用關鍵字或畫素、em 等數值。應根據特定網頁的需求選擇合適的方法。

關鍵詞

關鍵字是在網頁上設定字型大小的好方法。透過在 <body> 元素上設定關鍵字字型大小，你可以在頁面其他任何地方設定相對字型大小，從而可以輕鬆地相應地放大或縮小整個頁面的字型。

畫素

當你需要畫素級的精度時，以畫素值（px）設定字型大小是一個不錯的選擇。px 值是靜態的。這是一種獨立於作業系統和跨瀏覽器的方式，可以明確告訴瀏覽器以你指定的高度畫素數來渲染字母。不同瀏覽器之間的結果可能會略有不同，因為它們可能使用不同的演算法來實現類似的效果。

字型大小設定也可以組合使用。例如，如果父元素設定為 16px，而其子元素設定為 larger，則子元素在頁面上會顯示得比父元素大。

備註： 用 px 定義字型大小是不利於無障礙訪問的，因為在某些瀏覽器中，使用者無法更改字型大小。例如，視力有限的使用者可能希望將字型大小設定得比網頁設計師選擇的大小大得多。如果你想建立包容性設計，請避免使用畫素單位來定義字型大小。

Em

使用 em 值可以建立動態或計算的字型大小（歷史上，em 單位源自於給定字型中大寫字母“M”的寬度）。該數值作為其所在元素的 font-size 屬性的乘數。思考這個例子：

css
p {
  font-size: 2em;
}

在這種情況下，<p> 元素的字型大小將是 <p> 元素繼承的計算 font-size 的兩倍。以此類推，font-size 為 1em 等於其所在元素的計算 font-size。

如果 <p> 的任何祖先元素都沒有設定 font-size，那麼 1em 將等於瀏覽器預設的 font-size，通常是 16px。因此，預設情況下 1em 等於 16px，2em 等於 32px。如果你在 <body> 元素上設定了 font-size 為 20px，那麼 <p> 元素上的 1em 將等於 20px，2em 將等於 40px。

為了計算任何所需畫素值的 em 等價值，你可以使用這個公式：

em = desired element pixel value / parent element font-size in pixels

例如，假設頁面的 <body> 的 font-size 設定為 16px。如果你想要的字型大小是 12px，那麼你應該指定 0.75em（因為 12/16 = 0.75）。同樣，如果你想要 10px 的字型大小，則指定 0.625em（10/16 = 0.625）；對於 22px，則指定 1.375em（22/16）。

em 是 CSS 中一個非常有用的單位，因為它會根據讀者選擇使用的字型自動調整其長度。

要記住一個重要事實：em 值會層疊。看下面的 HTML 和 CSS：

css
html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}
html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>

結果是：

假設瀏覽器的預設 font-size 是 16px，那麼“outer”這個詞將被渲染為 25.6px，但“inner”這個詞將被渲染為 40.96px。這是因為內部 <span> 的 font-size 是 1.6em，它相對於其父元素的 font-size，而父元素的 font-size 又相對於其父元素的 font-size。這通常被稱為層疊。

Rem

rem 值的發明是為了避開層疊問題。rem 值是相對於根 html 元素，而不是父元素。換句話說，它允許你以相對方式指定字型大小，而不受父元素大小的影響，從而消除了層疊效應。

下面的 CSS 與前一個例子幾乎相同。唯一的例外是單位已更改為 rem。

css
html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}

然後我們將這個 CSS 應用於相同的 HTML，如下所示：

html
<span>Outer <span>inner</span> outer</span>

在這個例子中，“outer inner outer”這些詞都顯示為 25.6px（假設瀏覽器的 font-size 保持預設值 16px）。

Ex

與 em 單位類似，使用 ex 單位設定的元素 font-size 是計算的或動態的。它的行為方式完全相同，只是在使用 ex 單位設定 font-size 屬性時，font-size 等於頁面上使用的第一個可用字型的 x-height。數值會乘以元素繼承的 font-size，並且 font-size 會相對層疊。

有關 ex 等字型相對長度單位的更詳細描述，請參閱 W3C 編輯草案。

正式定義

初始值medium
應用於所有元素和文字。它也適用於 ::first-letter 和 ::first-line。
繼承性是
百分比參考父元素的字型大小
計算值絕對 <length>
動畫型別按計算值型別

正式語法

font-size = 
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math                       

<length-percentage> = 
  <length>      |
  <percentage>

示例

設定字型大小

CSS

css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

HTML

html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>

結果

規範

規範
CSS 字型模組第 4 級
# font-size-prop

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.