font-variation-settings

font-variation-settings CSS 属性通过允许您指定要沿其变化的特征的四个字母轴名称及其值，从而提供对可变字体特征的低级控制。

试试看

语法

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 版本，而 10.13 之前的 macOS 不支持可变字体。如果您的操作系统不是最新的，您将无法在网页或 Firefox 开发者工具中使用可变字体。

正式定义

初始值normal
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值按指定
动画类型转换

正式语法

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

<opentype-tag> = 
  <string>

示例

您可以在我们的 可变字体指南 中找到许多其他可变字体示例。

控制可变字体粗细 (wght)

您可以编辑下面示例中的 CSS 以使用不同的字体粗细值。看看当您指定超出粗细范围的值时会发生什么。

控制可变字体倾斜 (slnt)

您可以编辑下面示例中的 CSS 以使用不同的字体倾斜/斜体值。

规范

规范
CSS 字体模块级别 4
# font-variation-settings-def

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅