可变字体动画师

在线使用可变字体轴制作文本动画

Animate variable fonts with CSS.

生成HTML 和CSS

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..1000,25..151&amp;display=swap">

<style>
.variable-font-animation {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 72px;
  line-height: 1.05;
  font-synthesis: none;
  font-variation-settings: 'opsz' 14, 'wght' 100, 'wdth' 100;
}

.variable-font-animation span {
  display: inline-block;
  animation: variable-font-axis 1600ms ease-in-out infinite alternate;
  font-variation-settings: 'opsz' 14, 'wght' 100, 'wdth' 100;
  font-weight: 100;
  white-space: pre-wrap;
}

@keyframes variable-font-axis {
  from {
    font-variation-settings: 'opsz' 14, 'wght' 100, 'wdth' 100;
    font-weight: 100;
  }
  to {
    font-variation-settings: 'opsz' 14, 'wght' 1000, 'wdth' 100;
    font-weight: 1000;
  }
}
</style>

<div class="variable-font-animation" aria-label="Animate variable fonts with CSS."><span style="animation-delay: 0ms;">A</span><span style="animation-delay: 70ms;">n</span><span style="animation-delay: 140ms;">i</span><span style="animation-delay: 210ms;">m</span><span style="animation-delay: 280ms;">a</span><span style="animation-delay: 350ms;">t</span><span style="animation-delay: 420ms;">e</span><span style="animation-delay: 490ms;"> </span><span style="animation-delay: 560ms;">v</span><span style="animation-delay: 630ms;">a</span><span style="animation-delay: 700ms;">r</span><span style="animation-delay: 770ms;">i</span><span style="animation-delay: 840ms;">a</span><span style="animation-delay: 910ms;">b</span><span style="animation-delay: 980ms;">l</span><span style="animation-delay: 1050ms;">e</span><span style="animation-delay: 1120ms;"> </span><span style="animation-delay: 1190ms;">f</span><span style="animation-delay: 1260ms;">o</span><span style="animation-delay: 1330ms;">n</span><span style="animation-delay: 1400ms;">t</span><span style="animation-delay: 1470ms;">s</span><span style="animation-delay: 1540ms;"> </span><span style="animation-delay: 1610ms;">w</span><span style="animation-delay: 1680ms;">i</span><span style="animation-delay: 1750ms;">t</span><span style="animation-delay: 1820ms;">h</span><span style="animation-delay: 1890ms;"> </span><span style="animation-delay: 1960ms;">C</span><span style="animation-delay: 2030ms;">S</span><span style="animation-delay: 2100ms;">S</span><span style="animation-delay: 2170ms;">.</span></div>

Aspose.FontAspose.Font Web Applications

Buy

可变字体使排版动画成为可能，而无需交换字体文件或将文本渲染为图像。此在线可变字体动画器使用CSS更改OpenType变化轴，例如粗细、宽度、光学尺寸、倾斜和自定义轴。

第一个版本完全在浏览器中运行。选择示例字体，选择轴，调整运动设置，然后复制生成的HTML和CSS。它是一个轻量级前端MVP，旨在在连接更深入的导出工作流程之前进行快速实验。

  • 直接在浏览器中为可变字体轴设置动画。
  • 选择现成的可变字体示例和运动预设。
  • 调整动画轴范围、持续时间、交错和预览文本。
  • 复制 HTML 和 CSS 以获得仅限前端的可变字体动画。

如何为可变字体文本设置动画

  • 选择示例可变字体。
  • 选择要设置动画的轴，例如重量、宽度、光学尺寸或倾斜。
  • 选择一个预设并调整持续时间、交错和从/到轴值。
  • 编辑预览文本以在真实的布局中测试动画。
  • 复制为您的前端生成的 HTML 和 CSS 代码段。

  • 可变字体文本动画如何工作？它使用CSS font-variation-settings 对OpenType 可变字体轴进行动画处理。文本保持可供选择并由浏览器呈现。
  • 这仅在前端运行吗？是的。此MVP 仅使用示例网络字体和浏览器CSS。实时预览不需要后端处理。
  • 哪些字体轴可以设置动画？当选定的可变字体显示重量、宽度、光学尺寸、倾斜和自定义轴时，可以对它们进行动画处理。
  • 我可以导出动画吗？第一个版本导出HTML 和CSS。更高版本可以连接到字体工具来上传字体、验证和更丰富的动画导出。

  • 实时动态预览

    使用示例可变字体和浏览器本机 CSS 立即预览动画版式。

  • 运动控制

    控制轴范围、时间和字母延迟，无需手动写入关键帧。

  • 前端导出

    复制可适用于登陆页面、UI 原型或实验的 HTML 和 CSS。
© Aspose Pty Ltd 2001-2026. All Rights Reserved.