Változó betűtípus-animátor

Szöveg animálása változó betűtípus-tengelyekkel online

Animate variable fonts with CSS.

Létrehozva: HTML és 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

A változó betűtípusok lehetővé teszik a tipográfia animálását a betűtípusfájlok felcserélése vagy a szöveg képként történő megjelenítése nélkül. Ez az online Variable Font Animator megváltoztatja az OpenType variációs tengelyeket, például a súlyt, a szélességet, az optikai méretet, a dőlést és az egyéni tengelyeket CSS segítségével.

Az első verzió teljes mértékben a böngészőben fut. Válasszon egy mintabetűtípust, válasszon egy tengelyt, hangolja be a mozgásbeállításokat, és másolja a generált HTML és CSS-t. Ez egy könnyű kezelőfelület MVP, amely gyors kísérletezésre szolgál, mielőtt a mélyebb exportálási munkafolyamatokat összekapcsolnák.

  • Animálja a változó betűtípus-tengelyeket közvetlenül a böngészőben.
  • Válasszon kész változó betűkészlet-mintákat és mozgás-előbeállításokat.
  • Hangolja be az animált tengelytartományt, időtartamot, lépcsőzetes és előnézeti szöveget.
  • Másolja ki a HTML és a CSS címet a csak frontend változó betűtípus-animációhoz.

Hogyan animáljunk változó betűtípusú szöveget

  • Válasszon minta változó betűtípust.
  • Válassza ki az animálni kívánt tengelyt, például súlyt, szélességet, optikai méretet vagy dőlést.
  • Válasszon egy előre beállított értéket, és állítsa be az időtartamot, a lépcsőzeteket és a tengelytől/tengelyig értékeket.
  • Szerkessze az előnézeti szöveget, hogy az animációt valósághű elrendezésben tesztelje.
  • Másolja ki a generált HTML és CSS kódrészletet a kezelőfelületéhez.

  • Hogyan működik a változó betűtípusú szöveganimáció?Az OpenType változó betűtípus-tengelyeket CSS font-variation-settings segítségével animálja. A szöveg továbbra is kiválasztható és megjeleníthető marad a böngésző által.
  • Ez csak a frontenden fut?Igen. Ez az MVP csak minta webes betűtípusokat és CSS böngészőt használ. Az élő előnézethez nincs szükség háttérfeldolgozásra.
  • Mely fonttengelyek animálhatók?A súly, a szélesség, az optikai méret, a dőlésszög és az egyéni tengelyek animálhatók, ha a kiválasztott változó betűtípus megjeleníti őket.
  • Exportálhatom az animációt?Az első verzió a HTML és a CSS fájlokat exportálja. A későbbi verziók csatlakozhatnak a betűkészlet-eszközökhöz a feltöltött betűtípusok ellenőrzéséhez, valamint a gazdagabb animációk exportálásához.

  • Élő mozgásos előnézet

    Azonnal megtekintheti az animált tipográfiát a változó betűtípusokkal és a böngészőnatív CSS-val.

  • Mozgásvezérlők

    Szabályozza a tengelytartományt, az időzítést és a betűkésleltetést anélkül, hogy kézi kulcskockákat írna.

  • Frontend Exportálás

    Másolja ki a HTML és CSS címeket, amelyeket céloldalakhoz, felhasználói felület prototípusokhoz vagy kísérletekhez lehet igazítani.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.