font-variation-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

font-variation-settings CSS 属性为可变字体特性提供了底层控制，让你可以指定要改变的特性的四字母轴名称及其值。

尝试一下

语法

css
/* 使用默认设置 */
font-variation-settings: normal;

/* 为字体轴名称设置值 */
font-variation-settings: "XHGT" 0.7;

/* 全局值 */
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" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz" font-optical-sizing

自定义轴可以是字体设计者希望在字体中改变的任何内容，例如升线或降线的高度、衬线的大小或其他任何可以想象到的内容。只要有唯一的 4 个字符轴，任何轴都可以使用。随着时间的推移，有些轴会变得越来越常见，甚至会被注册。

备注： 注册轴标记使用小写标记，而自定义轴应使用大写标记。需要注意的是，字体设计者并不是必须遵循这种做法，有些设计者也不会这样做。重要的一点是，轴标签是区分大小写的。

要在操作系统上使用可变字体，需要确保操作系统是最新的。例如，Linux 操作系统需要最新的 Linux Freetype 版本，而 10.13 之前的 macOS 不支持可变字体。如果操作系统不是最新版本，就无法在网页或 Firefox 开发工具中使用可变字体。

形式定义

初始值normal
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性是
计算值as specified
动画类型a transform

形式语法

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

<opentype-tag> = 
  <string>

示例

你可以在我们的可变字体指南中找到大量其他可变字体示例。

控制可变字体字重（wght）

你可以编辑下面示例中的 CSS，尝试不同的字体字重值。看看如果指定的值超出了字重范围会发生什么。

控制可变字体斜度（slnt）

你可以编辑下面示例中的 CSS，尝试不同的字体斜度值。

规范

Specification
CSS Fonts Module Level 4
# font-variation-settings-def

浏览器兼容性

BCD tables only load in the browser

参见