Animador de fuentes variables

Animar texto con ejes de fuente variables en línea

Animate variable fonts with CSS.

Generado HTML y 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

Las fuentes variables permiten animar la tipografía sin intercambiar archivos de fuentes ni representar texto como imágenes. Este animador de fuentes variables en línea cambia los ejes de variación OpenType, como el peso, el ancho, el tamaño óptico, la inclinación y los ejes personalizados con CSS.

La primera versión se ejecuta completamente en el navegador. Elija una fuente de muestra, seleccione un eje, ajuste la configuración de movimiento y copie los HTML y CSS generados. Es una interfaz ligera MVP destinada a una experimentación rápida antes de conectar flujos de trabajo de exportación más profundos.

  • Anima los ejes de fuentes variables directamente en tu navegador.
  • Elija muestras de fuentes variables y ajustes preestablecidos de movimiento ya preparados.
  • Ajuste el rango del eje animado, la duración, el escalonamiento y la vista previa del texto.
  • Copie HTML y CSS para obtener una animación de fuente variable solo en la interfaz.

Cómo animar texto de fuente variable

  • Elija una fuente variable de muestra.
  • Seleccione el eje que desea animar, como peso, ancho, tamaño óptico o inclinación.
  • Elija un ajuste preestablecido y ajuste la duración, el escalonamiento y los valores del eje desde/hacia.
  • Edite el texto de vista previa para probar la animación en un diseño realista.
  • Copie el fragmento HTML y CSS generado para su interfaz.

  • ¿Cómo funciona la animación de texto de fuente variable?Anima los ejes de fuente variable OpenType con CSS font-variation-settings. El texto sigue siendo seleccionable y representado por el navegador.
  • ¿Esto se ejecuta sólo en la interfaz?Sí. Este MVP utiliza fuentes web de muestra y navegador CSS únicamente. No se requiere procesamiento de backend para la vista previa en vivo.
  • ¿Qué ejes de fuente se pueden animar?El peso, el ancho, el tamaño óptico, la inclinación y los ejes personalizados se pueden animar cuando la fuente variable seleccionada los expone.
  • ¿Puedo exportar la animación?La primera versión exporta HTML y CSS. Las versiones posteriores pueden conectarse a herramientas de fuentes para cargar fuentes, validar y exportar animaciones más ricas.

  • Vista previa de movimiento en vivo

    Obtenga una vista previa de la tipografía animada inmediatamente con fuentes variables de muestra y CSS nativo del navegador.

  • Controles de movimiento

    Controle el rango de ejes, la sincronización y los retrasos de las letras sin escribir fotogramas clave manualmente.

  • Exportación frontal

    Copie HTML y CSS que se puedan adaptar para páginas de destino, prototipos de interfaz de usuario o experimentos.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.