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 上查看此页面 • 报告此内容的问题