font-weight - CSS | MDN

試一試

font-weight: normal;

font-weight: bold;

font-weight: lighter;

font-weight: bolder;

font-weight: 100;

font-weight: 900;

<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>

section {
  font-size: 1.2em;
}

語法

css

/* <font-weight-absolute> keyword values */
font-weight: normal;
font-weight: bold;

/* <font-weight-absolute> numeric values [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

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

font-weight 屬性可以使用 <font-weight-absolute> 值或相對粗細值來指定，如下所示。

值

normal: 常規字型粗細。與 400 相同。
bold: 粗體字型粗細。與 700 相同。
<number>: 介於 1 到 1000 之間的 <number> 值，包含這兩個值。數字越大表示越粗（或同樣粗）。這使得可變字型可以進行精細控制。對於非可變字型，如果確切指定的粗細不可用，則使用回退粗細演算法——可被 100 整除的數值對應於常見的粗細名稱，如下面的常見粗細名稱對映部分所述。
lighter: 比父元素相對更細一個字型粗細。請注意，只有四個字型粗細被考慮用於相對粗細計算；請參閱下面的相對粗細的含義部分。
bolder: 比父元素相對更粗一個字型粗細。請注意，只有四個字型粗細被考慮用於相對粗細計算；請參閱下面的相對粗細的含義部分。

回退粗細

如果給定的確切粗細不可用，則使用以下規則來確定實際渲染的粗細

如果給定的目標粗細介於 400 和 500 之間（含）
- 以升序查詢目標與 500 之間的可用粗細。
- 如果未找到匹配項，則以降序查詢小於目標的可用粗細。
- 如果未找到匹配項，則以升序查詢大於 500 的可用粗細。
如果給定的粗細小於 400，則以降序查詢小於目標的可用粗細。如果未找到匹配項，則以升序查詢大於目標的可用粗細。
如果給定的粗細大於 500，則以升序查詢大於目標的可用粗細。如果未找到匹配項，則以降序查詢小於目標的可用粗細。

注意：回退粗細演算法僅用於渲染。屬性的計算值仍然是指定值。

相對粗細的含義

當指定 lighter 或 bolder 時，下表顯示瞭如何確定元素的絕對字型粗細。

請注意，在使用相對粗細時，只考慮四個字型粗細——細體 (100)、常規體 (400)、粗體 (700) 和特粗體 (900)。如果字型家族有更多可用粗細，它們將被忽略，不用於相對粗細計算。

繼承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

常見粗細名稱對映

數值 100 到 900 大致對應於以下常見的粗細名稱（請參閱 OpenType 規範）

值	常見粗細名稱
100	細體 (Hairline)
200	特細體 (Ultra Light)
300	淺色
400	常規體 (Regular)
500	Medium
600	半粗體 (Demi Bold)
700	粗體
800	特粗體 (Ultra Bold)
900	黑體 (Heavy)
950	特黑體 (Ultra Black)

可變字型

雖然許多字型都有一個特定的粗細對應於常見粗細名稱對映中的一個數字，但大多數可變字型支援一系列粗細，提供更精細的粒度，讓設計師和開發者可以更好地控制所選的粗細。

對於 TrueType 或 OpenType 可變字型，"wght" 變體用於實現不同的粗細。

此演示載入時設定了 font-weight: 500;。更改 .sample 選擇器中 font-weight 屬性的值，以檢視文字粗細的變化（例如，200，700）。點選下面程式碼塊中的“播放”以在 MDN Playground 中編輯示例

html

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

css

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

.sample {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "MutatorSans", sans-serif;
}

無障礙

有低視力障礙的人可能難以閱讀 font-weight 值為 100（細體/髮絲體）或 200（特細體）的文字，特別是如果字型具有低對比度顏色比。

正式定義

初始值	`normal`
應用於	所有元素和文字。它也適用於 `::first-letter` 和 `::first-line`。
繼承性	是
計算值	指定的關鍵字或數值，其中 `bolder` 和 `lighter` 已轉換為實際值
動畫型別	按計算值型別

正式語法

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

示例

設定字型粗細

HTML

html

<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures or conversations?"
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>

CSS

css

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps heavier than
   normal but less than a standard bold. */
div {
  font-weight: 600;
}

/* Set span text to be one step lighter
   than its parent. */
span {
  font-weight: lighter;
}

結果

規範

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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者於 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題

繼承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

繼承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

繼承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700