1. Web
  2. CSS
  3. @font-face
  4. font-weight

font-weight

Baseline 已廣泛支援

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

font-weight CSS @font-face 描述符允許作者為 @font-face 規則中指定的字型指定單個字重或一系列字重。當 CSS 規則設定所需的字型粗細時，瀏覽器將使用此資訊來選擇合適的字型。

通常，開發者希望在同一字型族中使用不同粗細的字型。對於傳統或*靜態*字型，單個字型檔案包含特定粗細和樣式的字型族字元：例如，“Helvetica bold italic”。為了在 font-weight 屬性呼叫特定粗細時能夠顯示 light、regular、bold 或 extra-bold 的字型，你可以為同一個字型族（所有字型族都具有相同的 font-family 描述符值）定義多個 @font-face 規則，每個規則對應一種或一系列粗細。

要宣告用於一系列字重的字型，請將以空格分隔的一對字重值宣告為 font-weight 描述符的值。當 CSS 規則透過設定 font-weight 屬性或 font 簡寫屬性來設定字重時，就會使用相應的字型。

例如，如果描述符是 font-weight: 400 600;，那麼當屬性是 font-weight: 450 或 font-weight: 550 時，該字型將用於該字型族。無論字型是靜態字型還是可變字型，都將使用與該範圍匹配的字型。在這種情況下，如果字型是靜態字型，450 和 550 的外觀將相同。如果字型是可變字型，後者會更粗。

該描述符對所有字型都相同，但為可變字型設定的範圍通常會更大，甚至可能是 1 1000，以便對所有字重屬性值都使用相同的字型。

語法

css
/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Defining a range */
font-weight: normal bold;
font-weight: 300 500;

值

font-weight 描述符采用以下形式之一

  • 關鍵字 auto。
  • 單個 <font-weight-absolute> 值。
  • 一對以空格分隔的 <font-weight-absolute> 值。

每個 <font-weight-absolute> 可以是以下任何一種

normal

正常字重。與 400 相同。

bold

粗體字重。與 700 相同。

<number>

一個介於 1 和 1000 之間（含）的 <number> 值。較大的數字表示比（或與）較小數字一樣粗的字重。某些常用值對應於常見的字重名稱，如下文常用字重名稱對映部分所述。

常用字重名稱對映

數值 100 到 900 大致對應以下常見的字重名稱

值 常用字重名稱
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 淺色
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

可變字型

大多數字體都有一個特定的粗細，對應於常用字重名稱對映中的一個數字。然而，一些稱為可變字型的字型可以支援更大或更小粒度的字重範圍，這可以使設計者對所選字重有更精確的控制。

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

無障礙

有視力障礙的人可能難以閱讀 font-weight 值為 100 (Thin/Hairline) 或 200 (Extra Light) 的文字，尤其是在字型的顏色對比度較低的情況下。

正式定義

相關的 at-rule@font-face
初始值normal
計算值同指定值

正式語法

font-weight = 
  auto                         |
  <font-weight-absolute>{1,2}  

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

示例

選擇 normal 和 bold 字型

在本例中，我們使用兩個 @font-face 規則，從 "Fira Sans" 字體系列中引入了兩種字型，一種是 normal 字重，一種是 bold 字重。我們設定 font-weight 描述符來匹配字型的粗細。

此後，CSS 規則只需設定 font-weight 屬性，即可為“Fira Sans”系列選擇 normal 或 bold 字型。請注意，<strong> HTML 元素也會選擇 bold 字型，因為預設情況下 <strong> 元素的 CSS font-weight 屬性值為 bold。

HTML

html
<p class="one">Fira Sans, `normal` weight paragraph</p>
<p class="two">Fira Sans, `bold` weight paragraph</p>
<p><strong>Fira Sans, &lt;strong&gt; element (`bold`)</strong></p>

CSS

css
@font-face {
  font-family: "Fira Sans";
  font-weight: normal;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: bold;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

結果

設定字重範圍

本示例演示了作者如何透過包含多個具有相同 font-family 值的 @font-face 宣告，來為多種字重（和字型樣式）包含多種字型。透過使用從 1 到 1000 的範圍設定 font-weight 描述符，你可以在樣式表的其餘部分宣告 font-weight（或 font-style），並知道將使用合適的字型。

HTML

html
<p class="one">This has a font weight of 100</p>
<p class="three">This has a font weight of 300</p>
<p class="four">This has a font weight of 400</p>
<p class="five">This has a font weight of 500</p>
<p class="seven">This has a font weight of 700</p>
<p class="nine">This has a font weight of 900</p>

CSS

如上一個示例所示，我們為 FireSans 字體系列的四種不同字型包含了四個 @font-face 宣告。每個宣告都設定為不同的字重值範圍，但都使用相同的字型名稱。

第一個宣告使用 FiraSans-Regular，其相關的 font-weight 範圍包括了所有可能的字重值範圍。

其他三個宣告使用了字型的 light、bold 和 extra-bold 版本，其相關的 font-weight 範圍定義了該範圍的子集，如下所示

  • light 字型與 1-300 的範圍相關聯
  • bold 字型與 500-700 的範圍相關聯
  • extra-bold 字型與 700-1000 的範圍相關聯

CSS 層疊確保後三個宣告會覆蓋在 FiraSans-Regular 宣告中設定的部分範圍。

css
@font-face {
  font-family: "Fira Sans";
  font-weight: 1 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 300;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 500 700;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 700 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: 100;
}

p.three {
  font-weight: 300;
}

p.four {
  font-weight: 400;
}

p.five {
  font-weight: 500;
}

p.seven {
  font-weight: 700;
}

p.nine {
  font-weight: 900;
}

結果

seven 段落使用了 extra bold 字型。雖然 font-weight: 700 同時匹配 FiraSans-Bold 和 FiraSans-ExtraBold 宣告，但由於 FiraSans-ExtraBold 是後宣告的，它會覆蓋 FiraSans-Bold 在該值上的設定。

同樣，100 和 300 都使用了 light 字型；儘管 FiraSans-Regular 和 FiraSans-Light 的範圍都包含 300，但 FiraSans-Light 是後宣告的。或者，我們也可以在 FiraSans-Light 之後宣告 FiraSans-Regular，但如果這樣做，就需要更改 font-weight 描述符的範圍。

為可變字型設定範圍

在本例中，我們使用 font-weight 描述符來限制使用可變字型時可以設定的粗細範圍。

我們使用單個 @font-face 規則引入一種可變字型 "League Mono"。我們使用 font-weight: 300 700 值來有效地限制可用的粗細範圍。如果 CSS 規則使用了我們的“League Mono”字型，那麼如果它指定的粗細超出此範圍，它得到的粗細將被限制在該範圍內。

HTML

我們包含一個段落，其 <output> 最初設定為 400，因為這是未設定樣式的段落文字的預設字重。該段落巢狀在另外兩個段落之間，因此你可以比較渲染出的字重值與宣告的字重值。

我們包含一個型別為 range 的 <input/range>，巢狀在 <label> 中，並設定 step 為 50。

html
<p>LeagueMono, font-weight: 300 (comparison)</p>
<p id="example">LeagueMono, font-weight: <output>400</output> (example)</p>
<p>LeagueMono, font-weight: 700 (comparison)</p>
<label
  >Change the font weight:
  <input type="range" min="50" max="1000" step="50" value="400" />
</label>

CSS

我們將 font-weight 描述符範圍設定為 300 700，將可變字型限制在該範圍內。

css
@font-face {
  font-family: "LeagueMono";
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-weight: 300 700;
}

p {
  font-family: "LeagueMono", serif;
  font-size: 1.5rem;
}

p:first-of-type {
  font-weight: 300;
}

p:last-of-type {
  font-weight: 700;
}

JavaScript

我們包含一個事件處理程式，用於更新段落的 font-weight 屬性值，並更新文字以反映更改

js
const text = document.querySelector("#example");
const log = document.querySelector("output");
const range = document.querySelector("input");

range.addEventListener("change", () => {
  text.style.fontWeight = range.value;
  log.innerText = range.value;
});

結果

透過範圍滑塊更改段落的字重。請注意，示例段落不會比其上方的 300 段落更細，也不會比其下方的 700 段落更粗；字重被限制在 font-weight 描述符定義的範圍內。

規範

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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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