可变字体

作者：陈川阅读数：12468人阅读分类： CSS

可变字体是一种现代CSS技术，允许单个字体文件通过调整轴参数动态改变字重、字宽、斜体等视觉特征。这项技术显著减少了字体文件体积，同时提供了更灵活的排版控制能力。

可变字体的核心概念

可变字体的核心在于字体设计师定义的可变轴。OpenType规范定义了五种注册轴：

字重轴 (wght)：控制笔画粗细
字宽轴 (wdth)：控制字符宽度
斜体轴 (ital)：控制斜体程度
倾斜轴 (slnt)：控制字符倾斜角度
光学尺寸轴 (opsz)：针对不同字号优化显示

此外字体设计师还可以创建自定义轴，比如衬线强度、x高度等。这些轴通过CSS的font-variation-settings属性控制：

h1 {
  font-family: 'InterVariable';
  font-variation-settings: 'wght' 650, 'slnt' -10;
}

浏览器支持与性能优势

现代浏览器包括Chrome、Firefox、Safari和Edge都已支持可变字体。与传统Web字体方案相比，可变字体具有明显优势：

文件体积更小：一个可变字体文件可替代多个静态字体文件
更精细的控制：可以在轴范围内设置任意值而非固定档位
动态调整能力：结合CSS动画实现平滑过渡效果

@font-face {
  font-family: 'SourceSansVariable';
  src: url('SourceSansVariable.woff2') format('woff2');
}

body {
  font-family: 'SourceSansVariable';
  transition: font-variation-settings 0.3s ease;
}

body:hover {
  font-variation-settings: 'wght' 700;
}

实际应用场景

响应式排版

可变字体特别适合响应式设计，可以根据视口尺寸动态调整字体特性：

:root {
  --viewport-scale: calc(100vw / 1440);
}

h1 {
  font-variation-settings: 
    'wght' calc(300 + (900 - 300) * var(--viewport-scale)),
    'wdth' calc(80 + (120 - 80) * var(--viewport-scale));
}

动态效果实现

结合CSS动画可以创建独特的文本效果：

@keyframes weight-shift {
  0% { font-variation-settings: 'wght' 100; }
  50% { font-variation-settings: 'wght' 900; }
  100% { font-variation-settings: 'wght' 100; }
}

.animated-text {
  animation: weight-shift 3s infinite;
}

高级技巧与注意事项

回退方案设计

虽然可变字体支持良好，但仍需考虑兼容性：

/* 传统字体堆叠方案 */
body {
  font-family: 'StaticFont', 'VariableFont', sans-serif;
}

/* 特性查询方案 */
@supports (font-variation-settings: 'wght' 400) {
  body {
    font-family: 'VariableFont';
  }
}

性能优化

尽管可变字体体积更小，仍需注意：

使用woff2格式压缩
设置font-display: swap避免布局偏移
预加载关键字体

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

创意应用实例

交互式字体调节

创建滑块控制字体参数：

<input type="range" id="weightControl" min="100" max="900" value="400">
<p id="demoText">可调节的文字示例</p>

<script>
  const weightControl = document.getElementById('weightControl');
  const demoText = document.getElementById('demoText');
  
  weightControl.addEventListener('input', (e) => {
    demoText.style.fontVariationSettings = `'wght' ${e.target.value}`;
  });
</script>

三维文字效果

结合可变字体和CSS变换：

.perspective-text {
  font-variation-settings: 'wght' 800, 'wdth' 85;
  transform: perspective(500px) rotateY(15deg);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

字体设计与开发协作

设计师和开发者需要密切配合：

确定需要暴露给CSS的轴参数
建立设计系统中的对应关系
创建样式指南文档示例：

| 使用场景   | wght值 | wdth值 | 备注          |
|------------|--------|--------|---------------|
| 标题       | 700    | 110    | 大屏幕使用    |
| 正文       | 400    | 100    | 默认值        |
| 强调文本   | 600    | 100    | 替代粗体标签  |