Kintamo šrifto animatorius

Animuokite tekstą naudodami kintamo šrifto ašis internete

Animate variable fonts with CSS.

Sukurta HTML ir 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

Kintamieji šriftai suteikia galimybę animuoti tipografiją nekeičiant šriftų failų arba nepateikiant teksto kaip vaizdų. Šis internetinis kintamo šrifto animatorius pakeičia OpenType variantų ašis, pvz., svorį, plotį, optinį dydį, pasvirimą ir pasirinktines ašis su CSS.

Pirmoji versija visiškai veikia naršyklėje. Pasirinkite pavyzdinį šriftą, pasirinkite ašį, sureguliuokite judesio nustatymus ir nukopijuokite sugeneruotus HTML ir CSS. Tai lengvas priekinis įrenginys MVP, skirtas greitai eksperimentuoti prieš prijungiant gilesnes eksporto darbo eigas.

  • Animuokite kintamo šrifto ašis tiesiai naršyklėje.
  • Pasirinkite paruoštus kintamų šriftų pavyzdžius ir išankstinius judesių nustatymus.
  • Sureguliuokite animuotos ašies diapazoną, trukmę, svyravimą ir peržiūros tekstą.
  • Nukopijuokite HTML ir CSS, kad sukurtumėte tik sąsajos kintamo šrifto animaciją.

Kaip animuoti kintamo šrifto tekstą

  • Pasirinkite pavyzdinį kintamąjį šriftą.
  • Pasirinkite ašį, kurią norite animuoti, pvz., svorį, plotį, optinį dydį arba nuolydį.
  • Pasirinkite išankstinį nustatymą ir pakoreguokite trukmę, svyravimą ir ašies reikšmes nuo/į.
  • Redaguokite peržiūros tekstą, kad išbandytumėte animaciją tikrovišku išdėstymu.
  • Nukopijuokite sugeneruotą HTML ir CSS fragmentą savo sąsajai.

  • Kaip veikia kintamo šrifto teksto animacija?Jis animuoja OpenType kintamo šrifto ašis su CSS font-variation-settings. Tekstas lieka pasirenkamas ir pateikiamas naršyklės.
  • Ar tai veikia tik priekinėje dalyje?Taip. Šis MVP naudoja tik pavyzdinius žiniatinklio šriftus ir naršyklę CSS. Norint atlikti tiesioginę peržiūrą, nereikia apdoroti pagrindinio kompiuterio.
  • Kurias šriftų ašis galima animuoti?Svoris, plotis, optinis dydis, pasvirimas ir pasirinktinės ašys gali būti animuojamos, kai jas atskleidžia pasirinktas kintamasis šriftas.
  • Ar galiu eksportuoti animaciją?Pirmoji versija eksportuoja HTML ir CSS. Vėlesnėse versijose galima prisijungti prie šriftų įrankių, skirtų įkeltiems šriftams, patvirtinimui ir gausesniam animacijos eksportavimui.

  • Tiesioginio judesio peržiūra

    Nedelsdami peržiūrėkite animuotą tipografiją naudodami kintamų šriftų pavyzdžius ir naršyklės CSS.

  • Judesio valdikliai

    Valdykite ašies diapazoną, laiką ir raidžių delsą nerašydami pagrindinių kadrų rankiniu būdu.

  • Frontend eksportas

    Nukopijuokite HTML ir CSS, kurias galima pritaikyti nukreipimo puslapiams, vartotojo sąsajos prototipams ar eksperimentams.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.