CSS `Variable Fonts` (可变字体) 深度：轴、实例与自定义样式

各位观众，晚上好！我是你们的老朋友，今天咱们不聊八卦，只聊字体——一种让前端开发人员既爱又恨的东西。今天的主题是 CSS Variable Fonts (可变字体)，保证让你们听完之后，对字体不再是“一头雾水”，而是“一手掌握”。

一、什么是可变字体？告别“字体包地狱”

在可变字体出现之前，如果我们想使用不同粗细、不同斜度的字体，就必须引入多个字体文件。比如，一个字体家族可能需要 Light、Regular、Bold、Italic 等等不同的字体文件。这不仅增加了 HTTP 请求，也让 CSS 代码变得冗长。想象一下，一个页面为了几种字重，引用十几个字体文件，那感觉就像…嗯，就像你的硬盘里塞满了各种格式的文件，找起来麻烦得要命。

可变字体就像一个“变形金刚”，它把一个字体家族的不同变体都压缩到一个文件中。通过 CSS，我们可以控制字体的各种参数，比如粗细、宽度、倾斜度等等，而不需要引入多个字体文件。这不仅减少了文件大小，也让 CSS 代码更加简洁。

二、可变字体的核心概念：轴 (Axes)

轴是可变字体的灵魂。它定义了字体可以变化的属性。常见的轴包括：

• wght (Weight): 字体的粗细，通常范围是 100-900。
• wdth (Width): 字体的宽度，可以控制字体是 Condensed (窄) 还是 Expanded (宽)。
• ital (Italic): 字体的倾斜度，通常是 0 (非斜体) 或 1 (斜体)。注意，这和 slnt 轴不同。
• slnt (Slant): 字体的倾斜角度，可以指定一个角度值，比如 -10 度。
• opsz (Optical Size): 字体的光学尺寸，根据字体的大小调整字体的细节，让小字更清晰，大字更美观。

除了这些标准轴之外，字体设计者还可以自定义轴，比如控制衬线的长度、字母的形状等等。

三、如何使用可变字体？CSS 是你的魔法棒

1. 引入字体文件：

   首先，你需要下载或购买可变字体文件（通常是 .ttf 或 .woff2 格式）。然后在 CSS 中使用 @font-face 规则引入字体文件。

   @font-face {
     font-family: 'MyVariableFont';
     src: url('MyVariableFont.woff2') format('woff2 supports variations'), /* Modern browsers */
          url('MyVariableFont.woff2') format('woff2'); /* Older browsers */
     font-weight: 100 900; /* 声明支持的字重范围 */
     font-stretch: 50% 200%; /* 声明支持的宽度范围 */
     font-style: normal;    /* 通常设置为 normal，因为可变字体本身可以控制倾斜 */
   }

   • font-family：给字体起一个名字，方便在 CSS 中引用。
   • src：指定字体文件的路径。注意，为了兼容不同的浏览器，最好提供多种格式的字体文件。
   • font-weight：声明字体支持的字重范围。这里表示支持 100 到 900 的所有字重。
   • font-stretch：声明字体支持的宽度范围。百分比表示相对于正常宽度的比例。
   • font-style：通常设置为 normal，因为可变字体本身可以通过 slnt 轴控制倾斜。

2. 使用 font-variation-settings 属性：

   font-variation-settings 属性允许你直接控制可变字体的轴。它的语法是：

   font-variation-settings: "轴的标签" 值, "轴的标签" 值, ...;

   轴的标签是轴的四个字母的缩写，比如 wght 代表 Weight，wdth 代表 Width。值是轴的具体数值。

   例如，要将字体设置为粗体 (Weight 700) 和窄体 (Width 75%)，可以这样写：

   .my-text {
     font-family: 'MyVariableFont';
     font-variation-settings: "wght" 700, "wdth" 75;
   }

   • font-family：指定使用的字体家族。
   • font-variation-settings：设置可变字体的轴。

3. 使用简写属性：

   对于一些常见的轴，CSS 提供了一些简写属性，比如 font-weight、font-stretch、font-style。这些属性可以更方便地控制字体的粗细、宽度和倾斜度。

   .my-text {
     font-family: 'MyVariableFont';
     font-weight: 700; /* 等价于 font-variation-settings: "wght" 700; */
     font-stretch: 75%; /* 等价于 font-variation-settings: "wdth" 75; */
     font-style: italic; /* 如果字体支持 ital 轴，则等价于 font-variation-settings: "ital" 1; */
   }

   使用简写属性可以让 CSS 代码更简洁易懂。

四、实例 (Instances)：预定义的字体变体

一些可变字体会预定义一些实例，这些实例是字体设计者认为比较好的字体变体。你可以直接使用实例，而不需要手动设置轴的值。

1. 如何查看字体支持的实例？

   可以使用一些字体编辑工具，比如 FontForge，来查看字体支持的实例。或者，一些在线字体工具也提供了查看实例的功能。

2. 如何在 CSS 中使用实例？

   可以使用 font-named-instance 属性来指定要使用的实例。

   @font-face {
     font-family: 'MyVariableFont';
     src: url('MyVariableFont.woff2') format('woff2 supports variations'), /* Modern browsers */
          url('MyVariableFont.woff2') format('woff2'); /* Older browsers */
     font-named-instance: 'Bold'; /* 声明一个名为 Bold 的实例 */
   }
   
   .my-text {
     font-family: 'MyVariableFont';
     font-named-instance: 'Bold'; /* 使用 Bold 实例 */
   }

   • font-named-instance：指定使用的实例名称。

   需要注意的是，font-named-instance 属性只能使用在 @font-face 规则和元素样式中。

五、自定义样式：让字体动起来

可变字体最酷的地方在于，你可以使用 CSS 动画和过渡效果来改变字体的参数，让字体动起来。

1. 使用 CSS 动画：

   .my-text {
     font-family: 'MyVariableFont';
     font-weight: 400;
     transition: font-weight 0.5s ease-in-out;
   }
   
   .my-text:hover {
     font-weight: 700; /* 鼠标悬停时，字体变粗 */
   }

   • transition：定义了 font-weight 属性的过渡效果。当 font-weight 属性发生变化时，会以 0.5 秒的速度平滑过渡。

2. 使用 @keyframes 规则：

   .my-text {
     font-family: 'MyVariableFont';
     animation: wiggle 2s infinite alternate;
   }
   
   @keyframes wiggle {
     0% {
       font-variation-settings: "wght" 400, "wdth" 100;
     }
     50% {
       font-variation-settings: "wght" 700, "wdth" 75;
     }
     100% {
       font-variation-settings: "wght" 400, "wdth" 100;
     }
   }

   • animation：指定动画名称、持续时间、循环次数和动画方向。
   • @keyframes：定义动画的关键帧。在每个关键帧中，可以设置 font-variation-settings 属性，改变字体的参数。

   通过 CSS 动画，你可以创建各种各样的字体效果，比如呼吸灯效果、跳动效果等等。

六、浏览器兼容性：前方道路光明，但仍需注意

目前，主流浏览器都对可变字体提供了良好的支持。但是，仍然有一些老版本的浏览器不支持可变字体。

• 查看 Can I Use： 可以在 Can I Use 网站上查看可变字体的浏览器兼容性。

• 提供备选方案： 为了兼容不支持可变字体的浏览器，你可以提供备选方案。比如，使用 @supports 规则来检测浏览器是否支持可变字体，如果不支持，则使用传统的字体文件。

  .my-text {
    font-family: 'MyVariableFont', sans-serif; /* 提供备选字体 */
  }
  
  @supports (font-variation-settings: normal) {
    .my-text {
      font-family: 'MyVariableFont';
    }
  }

  • @supports：检测浏览器是否支持 font-variation-settings 属性。如果支持，则使用可变字体；否则，使用备选字体。

七、可变字体的优势与局限性：理性看待，物尽其用

优势：

• 减少文件大小： 将多个字体变体压缩到一个文件中，减少 HTTP 请求，提高页面加载速度。
• 提高性能： 浏览器只需要加载一个字体文件，减少内存占用，提高渲染性能。
• 增强灵活性： 可以通过 CSS 控制字体的各种参数，实现更丰富的字体效果。
• 提升用户体验： 可以根据屏幕尺寸、设备类型等因素动态调整字体，提升用户体验。

局限性：

• 字体设计成本高： 设计可变字体需要更高的成本和技术水平。
• 部分浏览器兼容性问题： 一些老版本的浏览器不支持可变字体，需要提供备选方案。
• 学习成本： 开发者需要学习可变字体的相关知识，才能充分利用其优势。

八、实战演练：一个小例子

现在，我们来做一个简单的例子，演示如何使用可变字体创建一个简单的动画效果。

1. HTML 代码：

   <!DOCTYPE html>
   <html>
   <head>
     <title>Variable Font Demo</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <h1 class="animated-text">Hello, Variable Fonts!</h1>
   </body>
   </html>

2. CSS 代码 (style.css):

   @font-face {
     font-family: 'Recursive';
     src: url('Recursive.woff2') format('woff2 supports variations'),
          url('Recursive.woff2') format('woff2');
     font-weight: 300 900;
     font-style: normal;
   }
   
   .animated-text {
     font-family: 'Recursive', sans-serif;
     font-size: 3em;
     animation: morph 3s infinite alternate ease-in-out;
   }
   
   @keyframes morph {
     0% {
       font-variation-settings: "CASL" 0, "CRSV" 0.5, "MONO" 0, "slnt" 0;
     }
     100% {
       font-variation-settings: "CASL" 1, "CRSV" 1, "MONO" 1, "slnt" 10;
     }
   }

   • Recursive 是一款免费的可变字体，大家可以下载来尝试。
   • 这个例子使用了 CASL (Casual)、CRSV (Cursive)、MONO (Monospace) 和 slnt (Slant) 等轴来创建动画效果。

九、总结：拥抱未来，字体从此不再单调

可变字体是字体技术的未来。它不仅可以减少文件大小，提高性能，还可以增强灵活性，提升用户体验。虽然目前还有一些局限性，但是随着技术的不断发展，可变字体将会越来越普及。

希望今天的讲座能帮助大家更好地理解可变字体。记住，字体不仅仅是文字的载体，它也是设计的一部分，它可以表达情感，传递信息。让我们一起拥抱可变字体，让字体从此不再单调！

附录：常用轴的详细说明

轴标签	轴名称	描述	范围	默认值
wght	Weight	字体的粗细，通常范围是 100-900。	100-900	400
wdth	Width	字体的宽度，可以控制字体是 Condensed (窄) 还是 Expanded (宽)。百分比表示相对于正常宽度的比例。	50-200	100
ital	Italic	字体的倾斜度，通常是 0 (非斜体) 或 1 (斜体)。注意，这和 slnt 轴不同。	0 或 1	0
slnt	Slant	字体的倾斜角度，可以指定一个角度值，比如 -10 度。	-90 到 90	0
opsz	Optical Size	字体的光学尺寸，根据字体的大小调整字体的细节，让小字更清晰，大字更美观。	通常是字号范围	12
XTRA	Extra	通常用于控制字体的额外属性，比如衬线的长度、字母的形状等等。这个轴的具体含义取决于字体设计者。	字体定义	字体定义
YTRA	Y Extra	通常用于控制字体的额外属性，比如衬线的长度、字母的形状等等。这个轴的具体含义取决于字体设计者。	字体定义	字体定义
CASL	Casual	字体风格的休闲程度，可以控制字体的正式程度。数值越高，字体越休闲。	0-1	0
CRSV	Cursive	字体的草书风格，可以控制字体的连笔程度。数值越高，字体越连笔。	0-1	0
MONO	Monospace	字体的等宽风格，可以控制字体是否等宽。数值越高，字体越等宽。	0-1	0

好了，今天的讲座就到这里。希望大家能有所收获，下次再见！