font-variation-settings

Baseline 已廣泛支援

此功能已成熟，並可在多種裝置和瀏覽器版本上使用。自 2018 年 9 月以來，它已在各種瀏覽器中推出。

font-variation-settings CSS 屬性透過允許您指定要變化的特徵的四個字母軸名稱及其值，來對可變字型特徵進行低階控制。

試一試

font-variation-settings: "wght" 50;

font-variation-settings: "wght" 850;

font-variation-settings: "wdth" 25;

font-variation-settings: "wdth" 75;

<section id="default-example">
  <p id="example-element">
    ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

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

語法

css

/* Use the default settings */
font-variation-settings: normal;

/* Set values for variable font axis names */
font-variation-settings: "xhgt" 0.7;

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

值

此屬性的值可以採用以下兩種形式之一

normal: 文字使用預設設定進行佈局。
<string> <number>: 渲染文字時，可變字型軸名稱列表會傳遞給文字佈局引擎，以啟用或停用字型功能。每個設定始終是一個或多個對，由一個 4 個 ASCII 字元的<string> 和一個指示要設定的軸值的<number> 組成。如果 <string> 字元數過多或過少，或者包含 U+20 - U+7E 程式碼點範圍之外的字元，則整個屬性無效。<number> 可以是小數或負數，具體取決於字型中可用的值範圍，由字型設計者定義。

描述

此屬性是一種低階機制，旨在在沒有其他方式啟用或訪問這些功能時設定可變字型功能。您只應在沒有基本屬性來設定這些功能（例如 font-weight、font-style）時才使用它。

使用 font-variation-settings 設定的字型特徵將始終覆蓋使用相應的基本字型屬性（例如 font-weight）設定的字型特徵，無論它們在級聯中出現在何處。在某些瀏覽器中，目前只有當 @font-face 宣告包含 font-weight 範圍時才成立。

註冊軸和自定義軸

可變字型軸分為兩種型別：註冊軸和自定義軸。

註冊軸是最常見的——常見到規範的作者認為它們值得標準化。請注意，這並不意味著作者必須將所有這些都包含在他們的字型中。

以下是註冊軸及其對應的 CSS 屬性

軸標籤	CSS 屬性
"wght"	`font-weight`
"wdth"	`font-stretch`
"slnt"（傾斜）	`font-style`: `oblique + angle`
"ital"	`font-style`: `italic`
"opsz"	`font-optical-sizing`

自定義軸可以是字型設計者希望在字型中變化的任何東西，例如上升部或下降部高度、襯線大小或他們能想象到的任何其他東西。只要給定一個唯一的 4 字元軸，任何軸都可以使用。有些最終會變得更常見，甚至可能隨著時間的推移而註冊。

注意：註冊軸標籤使用小寫標籤標識，而自定義軸應給定大寫標籤。請注意，字型設計者並不強制遵循此做法，有些字型設計者也不會遵循。這裡重要的啟示是軸標籤區分大小寫。

要在您的作業系統上使用可變字型，您需要確保它已更新。例如，Linux 作業系統需要最新的 Linux FreeType 版本，而 macOS 10.13 之前的版本不支援可變字型。如果您的作業系統未更新，您將無法在網頁或 Firefox 開發工具中使用可變字型。

正式定義

初始值	`normal`
應用於	所有元素。也適用於 `::first-letter` 和 `::first-line`。
繼承性	是
計算值	同指定值
動畫型別	變換

正式語法

font-variation-settings = 
  normal                        |
  [ <opentype-tag> <number> ]#  

<opentype-tag> = 
  <string>

示例

您可以在我們的可變字型指南中找到許多其他可變字型示例。

控制可變字型粗細 (wght)

點選下方程式碼塊中的“播放”以在 MDN Playground 中編輯示例。編輯 CSS 以使用不同的字型粗細值。檢視當您指定超出粗細範圍的值時會發生什麼。

<div>
  <p class="p1">Weight</p>
  <span>(font-weight: 625)</span>
</div>
<div>
  <p class="p2">Weight</p>
  <span>(font-variation-settings: "wght" 625)</span>
</div>
<div class="adjustable">
  <p class="p3">Weight</p>
  (font-variation-settings: "wght" <span id="angle-text">625</span>)<br />
  <label for="text-axis">Adjust Weight: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="300"
    max="900"
    value="625" />
</div>

@font-face {
  font-family: "Amstelvar VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2")
    format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 35% 100%;
  font-style: normal;
  font-display: swap;
}

p {
  font:
    1.2em "Amstelvar VF",
    "Georgia",
    serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 625;
}

css

/* weight range is 300 to 900 */
.p1 {
  font-weight: 625;
}

/* weight range is 300 to 900 */
.p2 {
  font-variation-settings: "wght" 625;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "wght" var(--text-axis);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

控制可變字型傾斜 (slnt)

點選下方程式碼塊中的“播放”以在 MDN Playground 中編輯示例。編輯 CSS 以使用不同的字型傾斜/斜體值。

<div>
  <p class="p1">Slant</p>
  <span>(font-style: oblique 14deg)</span>
</div>
<div>
  <p class="p2">Slant</p>
  <span>(font-variation-settings: 'slnt' 12)</span>
</div>
<div class="adjustable">
  <p class="p3">Slant</p>
  (font-variation-settings: 'slnt' <span id="angle-text">5</span>)<br />
  <label for="text-axis">Adjust Weight: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="0"
    max="12"
    value="5" />
</div>

@font-face {
  font-family: "Roboto VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/Roboto-VF.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: oblique 0deg 12deg;
  font-display: swap;
}

p {
  font:
    1.2em "Roboto VF",
    "Helvetica",
    sans-serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 5;
}

css

/* slant range is from 0deg to 12deg */
.p1 {
  font-style: oblique 14deg;
}

/* slant range is from 0 to 12 */
.p2 {
  font-variation-settings: "slnt" 12;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "slnt" var(--text-axis);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

規範

規範
CSS 字型模組第 4 級 # font-variation-settings-def

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者於2025 年 10 月 13 日修改。

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