Animatore di caratteri variabili

Anima il testo con gli assi dei caratteri variabili online

Animate variable fonts with CSS.

Generato HTML e 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

I caratteri variabili consentono di animare la tipografia senza scambiare file di caratteri o visualizzare il testo come immagini. Questo animatore di caratteri variabili online modifica gli assi di variazione OpenType come peso, larghezza, dimensione ottica, inclinazione e assi personalizzati con CSS.

La prima versione funziona completamente nel browser. Scegli un carattere di esempio, seleziona un asse, regola le impostazioni di movimento e copia i file HTML e CSS generati. Si tratta di un frontend leggero MVP destinato alla sperimentazione rapida prima che vengano collegati flussi di lavoro di esportazione più approfonditi.

  • Anima gli assi dei caratteri variabili direttamente nel tuo browser.
  • Scegli campioni di caratteri variabili e preimpostazioni di movimento già pronti.
  • Ottimizza l'intervallo dell'asse animato, la durata, lo scaglionamento e il testo di anteprima.
  • Copia HTML e CSS per un'animazione con caratteri variabili solo frontend.

Come animare il testo con caratteri variabili

  • Scegli un carattere variabile di esempio.
  • Seleziona l'asse che desideri animare, ad esempio peso, larghezza, dimensione ottica o inclinazione.
  • Scegli una preimpostazione e regola la durata, lo scaglionamento e i valori dell'asse da/a.
  • Modifica il testo di anteprima per testare l'animazione in un layout realistico.
  • Copia lo snippet HTML e CSS generato per il tuo frontend.

  • Come funziona l'animazione del testo con caratteri variabili?Anima gli assi dei caratteri variabili OpenType con CSS font-variation-settings. Il testo rimane selezionabile e visualizzato dal browser.
  • Funziona solo sul frontend?Sì. Questo MVP utilizza solo caratteri Web di esempio e browser CSS. Per l'anteprima dal vivo non è richiesta alcuna elaborazione back-end.
  • Quali assi dei caratteri possono essere animati?Peso, larghezza, dimensione ottica, inclinazione e assi personalizzati possono essere animati quando il carattere variabile selezionato li espone.
  • Posso esportare l'animazione?La prima versione esporta HTML e CSS. Le versioni successive possono connettersi agli strumenti dei caratteri per caricare caratteri, convalida ed esportazioni di animazioni più ricche.

  • Anteprima del movimento dal vivo

    Anteprima immediata della tipografia animata con caratteri variabili di esempio e CSS nativi del browser.

  • Controlli di movimento

    Controlla l'intervallo degli assi, i tempi e i ritardi delle lettere senza scrivere manualmente i fotogrammi chiave.

  • Esportazione frontend

    Copia HTML e CSS che possono essere adattati per pagine di destinazione, prototipi di interfaccia utente o esperimenti.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.