如何减少可变字体动画的CSS布局与重绘开销？

我按照某教程实现可变字体动画，但发现该动画CPU开销较高（尤其是渲染环节）：

对比类似transform动画的基准测试结果：

请问是否可以优化可变字体动画的布局与重绘，以大幅提升其性能？

示例代码 #

CSS

@font-face {
  font-family: "IBM Plex Sans Roman";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}

.animation {
  width: 8rem;
  margin: 0 auto;
  font-family: "IBM Plex Sans Roman";
  font-size: 8rem;
  font-variation-settings: 'wght' 100, 'wdth' 85;
  text-align: center;
  animation: breathe 4000ms infinite both;
}

@keyframes breathe {
  0% {
    font-variation-settings: 'wght' 100, 'wdth' 85;
  }

  60% {
    font-variation-settings: 'wght' 700, 'wdth' 100;
  }

  100% {
    font-variation-settings: 'wght' 100, 'wdth' 85;
  }
}

HTML

<div class="animation">G</div>

优化方案 #

核心问题在于：font-variation-settings动画会触发浏览器的重绘（Paint）甚至布局（Layout），每帧都要重新计算字形；而transform动画仅触发GPU负责的合成（Composite），性能差异根源在此。以下是可行的优化路径：

1. 用transform: scale()模拟（性能最优，近似效果）

放弃原生可变字体属性动画，用transform模拟字重、宽度变化，完全走GPU合成：

.animation {
  width: 8rem;
  margin: 0 auto;
  font-family: "IBM Plex Sans Roman";
  font-size: 8rem;
  font-variation-settings: 'wght' 100, 'wdth' 85;
  text-align: center;
  will-change: transform; /* 提前通知浏览器准备GPU加速 */
  transform-origin: center;
  animation: breathe-transform 4000ms infinite both;
}

@keyframes breathe-transform {
  0% {
    transform: scale(1, 1);
  }
  60% {
    /* 横向缩放模拟宽度增加，纵向微调模拟字重加粗的视觉感受 */
    transform: scale(1.15, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}

• 优势：性能和transform基准测试一致，CPU占用极低；
• 缺点：字形细节和原生可变字体动画有细微差异，适合对精度要求不高的场景。

2. 转为SVG动画（保留细节，兼顾性能）

将文字导出为SVG路径，动画SVG的transform属性，既保留字形细节又利用GPU加速：

<!-- 示例SVG，实际需导出对应字体的G字形路径 -->
<svg viewBox="0 0 120 120" class="svg-animation">
  <path d="M30 20h60v20c0 16.57-13.43 30-30 30s-30-13.43-30-30V20zm30 55c13.81 0 25-11.19 25-25v-5h-50v5c0 13.81 11.19 25 25 25z" fill="currentColor"/>
</svg>

.svg-animation {
  width: 8rem;
  margin: 0 auto;
}
.svg-animation path {
  will-change: transform;
  transform-origin: center;
  animation: svg-breathe 4000ms infinite both;
}

@keyframes svg-breathe {
  0% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1.15, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}

• 优势：完美保留可变字体的字形细节，性能接近transform动画；
• 缺点：多字符场景需要逐个导出SVG路径，工作量较大。

3. 优化原生动画渲染（保留原生效果，小幅提升）

如果必须使用font-variation-settings动画，可通过以下手段降低CPU开销：

• 降低动画帧率：添加animation-timing-function: steps(8)，减少浏览器逐帧渲染的次数（视觉流畅度略有下降）；
• 限制绘制区域：缩小元素尺寸或用overflow: hidden裁剪多余区域，减少每帧需要处理的像素量；
• 强制硬件加速：给元素添加transform: translateZ(0)或will-change: font-variation-settings，尝试让GPU参与渲染（部分浏览器对字体属性的GPU支持有限，需实际测试）。

内容的提问来源于stack exchange，提问作者stone-zeng