CSS `Variable Fonts` `Axis Definitions` 与 `Registered Axes` 的精确控制

各位观众，晚上好！我是你们的老朋友，今天咱们来聊聊 CSS Variable Fonts 里那些让人眼花缭乱的轴定义和注册轴，保证让你们听完之后，感觉自己也能操控字体变形金刚！

一、 Variable Fonts 基础回顾：字体变形金刚的秘密

首先，快速回顾一下 Variable Fonts（可变字体）。简单来说，它就像一个字体界的变形金刚，一个字体文件包含了各种各样的“变形”信息，通过 CSS，我们可以控制这些“变形”，从而得到无数种不同的字体样式，而控制这些变形的，就是所谓的“轴（Axis）”。

想象一下，以前我们想要一个加粗的字体，就要引入一个专门的粗体字体文件。现在有了 Variable Fonts，只需要调整字体的“粗细”轴，就能得到想要的粗体效果，省去了加载多个字体文件的麻烦，性能更高，也更灵活。

二、 轴定义：字体变形的“遥控器”

Variable Fonts 里的轴定义，就是控制字体变形的“遥控器”。每个轴都代表着字体的一个可变属性，比如粗细、宽度、倾斜等等。

轴定义主要分为两种：

• Registered Axes（注册轴）： 这些是标准化的、预定义的轴，由 W3C 官方定义，有着固定的标签和含义。
• Custom Axes（自定义轴）： 这是字体设计师自己定义的轴，用于实现一些特殊的字体效果，标签和含义都由设计师自己决定。

三、 Registered Axes：标准化的变形模式

Registered Axes 是由 W3C 官方定义的标准化轴，它们都有一个四个字符的标签，方便我们在 CSS 中使用。下面是一些常见的 Registered Axes：

轴标签	轴名称	含义	取值范围	示例
wght	Weight	字体的粗细，从细到粗	1-1000	font-weight: 400; (正常) font-weight: 700; (加粗) font-weight: 900; (极粗)
wdth	Width	字体的宽度，从窄到宽	1-100	font-stretch: 50%; (压缩) font-stretch: 100%; (正常) font-stretch: 150%; (拉伸)
ital	Italic	字体的斜体状态，通常只有 0 和 1 两个值	0 或 1	font-style: normal; (正常) font-style: italic; (斜体) （注意：并非所有字体都支持 ital 轴，有些字体使用 slnt 轴来实现斜体效果）
slnt	Slant	字体的倾斜角度，以度为单位	-90 到 90	font-style: oblique 10deg; (倾斜 10 度) font-style: oblique -15deg; (倾斜 -15 度) （注意：slnt 轴通常与 font-style: oblique 配合使用）
opsz	Optical Size	光学尺寸，用于针对不同字号进行优化	通常与字体设计师定义的范围相关	font-optical-sizing: auto; (自动) font-optical-sizing: none; (禁用) （注意：opsz 轴通常由浏览器自动处理，很少需要手动设置）
GRAD	Grade	字体的笔画粗细，可以用于调整字体的视觉重量，而不用改变字体的宽度。	范围不定	类似于 wght，但更精细，用于在不改变字体宽度的情况下调整视觉重量。 例如，在暗色背景上，可以增加 GRAD 的值，使字体更清晰。
XTRA	X-Height	影响小写字母的高度。	范围不定	调整小写字母的高度，可以改变字体的视觉比例和可读性。
YTRA	Y-Height	影响大写字母的高度。	范围不定	调整大写字母的高度，可以改变字体的视觉比例和可读性。
CNTR	Counter Width	影响字母内部空白的大小。	范围不定	调整字母内部空白的大小，可以改变字体的可读性，尤其是在小字号下。
SHRP	Sharpness	影响字体的锐利度。	范围不定	调整字体的锐利度，可以改变字体的视觉效果，使其更清晰或更柔和。

示例代码：

/* 使用 wght 轴调整字体粗细 */
.variable-font {
  font-family: "MyVariableFont"; /* 替换为你的字体名称 */
  font-weight: 400; /* 默认粗细 */
}

.variable-font.bold {
  font-weight: 700; /* 加粗 */
}

/* 使用 wdth 轴调整字体宽度 */
.variable-font.condensed {
  font-stretch: 75%; /* 压缩字体 */
}

.variable-font.expanded {
  font-stretch: 125%; /* 拉伸字体 */
}

/* 使用 ital 轴调整字体斜体 */
.variable-font.italic {
  font-style: italic; /* 斜体 */
}

/* 使用 slnt 轴调整字体倾斜角度 */
.variable-font.oblique {
  font-style: oblique 15deg; /* 倾斜 15 度 */
}

四、 Custom Axes：释放字体设计师的想象力

Custom Axes 是字体设计师自己定义的轴，用于实现一些特殊的字体效果，标签和含义都由设计师自己决定。这给了字体设计师极大的自由度，可以创造出各种各样独特的字体效果。

例如，设计师可以定义一个名为 CRSV（Curvature Severity）的轴，用于控制字体的曲线程度，或者定义一个名为 WBLD（Weight Bolding）的轴，用于在字重增加的同时，调整字体的其他属性，使其更具特色。

示例代码：

假设我们有一个自定义轴 CRSV，取值范围是 0 到 100，用于控制字体的曲线程度。

/* 定义字体 */
@font-face {
  font-family: "MyVariableFont";
  src: url("MyVariableFont.woff2") format("woff2 supports variations"),
       url("MyVariableFont.woff2") format("woff2");
  font-weight: 100 900; /* 声明支持的字重范围，通常需要根据字体文件实际情况调整 */
  font-display: swap;
}

/* 使用 font-variation-settings 属性设置自定义轴 */
.variable-font {
  font-family: "MyVariableFont";
  font-variation-settings: "CRSV" 0; /* 默认曲线程度 */
}

.variable-font.curved {
  font-variation-settings: "CRSV" 50; /* 增加曲线程度 */
}

.variable-font.very-curved {
  font-variation-settings: "CRSV" 100; /* 最大曲线程度 */
}

/* 同时设置多个轴 */
.variable-font.bold-curved {
  font-weight: 700;
  font-variation-settings: "CRSV" 75;
}

注意：

• 使用 Custom Axes 需要使用 font-variation-settings 属性，这个属性的值是一个字符串，包含了多个轴的标签和值，用逗号分隔。
• 轴标签必须用引号包裹，值可以是数字或关键字。
• font-variation-settings 属性会覆盖 font-weight、font-stretch 等属性，所以在使用 Custom Axes 的同时，也要注意设置这些属性。
• 并非所有浏览器都支持 Variable Fonts 和 Custom Axes，需要进行兼容性处理。

五、 font-variation-settings 属性详解：操控变形金刚的终极武器

font-variation-settings 属性是控制 Variable Fonts 的核心属性，它允许我们直接设置字体的各个轴的值，从而实现各种各样的字体效果。

font-variation-settings 属性的值是一个字符串，包含了多个轴的标签和值，用逗号分隔。每个轴的标签和值用空格分隔。

语法：

font-variation-settings: "axis1" value1, "axis2" value2, ...;

示例：

/* 设置字体的粗细和宽度 */
.variable-font {
  font-variation-settings: "wght" 700, "wdth" 125;
}

/* 设置字体的自定义轴 */
.variable-font {
  font-variation-settings: "CRSV" 50, "WBLD" 25;
}

注意事项：

• 轴标签必须用引号包裹。
• 值可以是数字或关键字，具体取决于轴的类型。
• font-variation-settings 属性会覆盖 font-weight、font-stretch 等属性，所以在使用 font-variation-settings 的同时，也要注意设置这些属性。
• 可以使用 normal 关键字重置轴的值，例如：font-variation-settings: "wght" normal;。
• 可以使用 initial 关键字将属性恢复到初始值，例如：font-variation-settings: initial;。
• 可以使用 inherit 关键字从父元素继承属性，例如：font-variation-settings: inherit;。

六、 Variable Fonts 的高级应用：动画与交互

Variable Fonts 不仅仅可以用于静态的字体样式，还可以用于动画和交互，实现更炫酷的视觉效果。

示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Variable Font Animation</title>
<style>
@font-face {
  font-family: "MyVariableFont";
  src: url("MyVariableFont.woff2") format("woff2 supports variations"),
       url("MyVariableFont.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.animated-text {
  font-family: "MyVariableFont";
  font-size: 48px;
  font-weight: 400;
  transition: font-weight 0.5s ease-in-out; /* 添加过渡效果 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
}

.animated-text:hover {
  font-weight: 700; /* 鼠标悬停时加粗 */
}

/* 使用 @keyframes 定义动画 */
@keyframes width-animation {
  0% {
    font-variation-settings: "wdth" 75;
  }
  50% {
    font-variation-settings: "wdth" 125;
  }
  100% {
    font-variation-settings: "wdth" 75;
  }
}

.animated-width {
  font-family: "MyVariableFont";
  font-size: 48px;
  animation: width-animation 3s infinite alternate; /* 应用动画 */
}

/* 使用 JavaScript 控制字体变形 */
.interactive-text {
  font-family: "MyVariableFont";
  font-size: 48px;
  font-weight: 400;
}
</style>
</head>
<body>

<div class="animated-text">Hover Me!</div>
<div class="animated-width">Expanding Text</div>
<div class="interactive-text" id="interactiveText">Click Me!</div>

<script>
  const interactiveText = document.getElementById("interactiveText");
  interactiveText.addEventListener("click", () => {
    interactiveText.style.fontVariationSettings = '"wght" 700'; // 点击时加粗
    setTimeout(() => {
      interactiveText.style.fontVariationSettings = '"wght" 400'; // 恢复正常
    }, 500);
  });
</script>

</body>
</html>

七、 Variable Fonts 的优势与局限性

优势：

• 文件体积更小： 一个 Variable Font 文件可以包含多种字体样式，避免了加载多个字体文件的麻烦，减少了网络请求，提高了页面加载速度。
• 更高的灵活性： 可以通过 CSS 控制字体的各个轴，实现各种各样的字体效果，满足不同的设计需求。
• 更好的性能： 浏览器可以更高效地渲染 Variable Fonts，提高了页面性能。

局限性：

• 兼容性问题： 并非所有浏览器都支持 Variable Fonts，需要进行兼容性处理。
• 学习成本： 掌握 Variable Fonts 需要一定的学习成本，需要了解轴的概念和 font-variation-settings 属性的用法。
• 字体选择： 可用的 Variable Fonts 数量相对较少，选择范围有限。

八、 总结与展望

Variable Fonts 是字体技术的一次重大革新，它带来了更小的文件体积、更高的灵活性和更好的性能，为 Web 设计带来了无限的可能性。

虽然 Variable Fonts 还有一些局限性，但随着技术的不断发展和普及，相信它会在未来 Web 设计中扮演越来越重要的角色。

希望今天的讲座能帮助大家更好地理解 Variable Fonts 的轴定义和注册轴，并能灵活运用它们，创造出更炫酷的字体效果。

谢谢大家！