Animateur de polices variables

Animer du texte avec des axes de police variables en ligne

Animate variable fonts with CSS.

HTML et CSS générés

<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

Les polices variables permettent d'animer la typographie sans permuter les fichiers de polices ni afficher le texte sous forme d'images. Cet animateur de polices variables en ligne modifie les axes de variation OpenType tels que le poids, la largeur, la taille optique, l'inclinaison et les axes personnalisés avec CSS.

La première version s'exécute entièrement dans le navigateur. Choisissez un exemple de police, sélectionnez un axe, ajustez les paramètres de mouvement et copiez les HTML et CSS générés. Il s'agit d'une interface légère MVP destinée à une expérimentation rapide avant que des flux de travail d'exportation plus approfondis ne soient connectés.

  • Animez des axes de polices variables directement dans votre navigateur.
  • Choisissez des échantillons de polices variables et des préréglages de mouvement prêts à l’emploi.
  • Ajustez la plage de l’axe animé, la durée, l’échelonnement et l’aperçu du texte.
  • Copiez HTML et CSS pour une animation de police variable frontend uniquement.

Comment animer un texte à police variable

  • Choisissez un exemple de police variable.
  • Sélectionnez l'axe que vous souhaitez animer, tel que le poids, la largeur, la taille optique ou l'inclinaison.
  • Choisissez un préréglage et ajustez la durée, l’échelonnement et les valeurs de l’axe de/à.
  • Modifiez le texte d'aperçu pour tester l'animation dans une mise en page réaliste.
  • Copiez l'extrait HTML et CSS généré pour votre interface.

  • Comment fonctionne l'animation de texte à police variable ?Il anime les axes de polices variables OpenType avec CSS font-variation-settings. Le texte reste sélectionnable et rendu par le navigateur.
  • Est-ce que cela fonctionne uniquement sur le frontend ?Oui. Ce MVP utilise uniquement des exemples de polices Web et un navigateur CSS. Aucun traitement backend n’est requis pour l’aperçu en direct.
  • Quels axes de police peuvent être animés ?Le poids, la largeur, la taille optique, l'inclinaison et les axes personnalisés peuvent être animés lorsque la police variable sélectionnée les expose.
  • Puis-je exporter l'animation ?La première version exporte HTML et CSS. Les versions ultérieures peuvent se connecter aux outils de polices pour les polices téléchargées, la validation et les exportations d'animations plus riches.

  • Aperçu du mouvement en direct

    Prévisualisez immédiatement la typographie animée avec des exemples de polices variables et CSS natif du navigateur.

  • Commandes de mouvement

    Contrôlez la plage des axes, le timing et les retards des lettres sans écrire manuellement les images clés.

  • Exportation frontale

    Copiez HTML et CSS qui peuvent être adaptés pour les pages de destination, les prototypes d'interface utilisateur ou les expériences.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.