Animator czcionek zmiennych

Animuj tekst ze zmiennymi osiami czcionek online

Animate variable fonts with CSS.

Wygenerowano HTML i 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

Czcionki zmienne umożliwiają animację typografii bez zamieniania plików czcionek i renderowania tekstu jako obrazów. Ten internetowy animator czcionek zmiennych OpenType zmienia osie odmian OpenType, takie jak waga, szerokość, rozmiar optyczny, nachylenie i osie niestandardowe za pomocą CSS.

Pierwsza wersja działa w pełni w przeglądarce. Wybierz przykładową czcionkę, wybierz oś, dostosuj ustawienia ruchu i skopiuj wygenerowane HTML i CSS. Jest to lekki interfejs MVP przeznaczony do szybkich eksperymentów przed połączeniem głębszych procesów eksportu.

  • Animuj zmienne osie czcionek bezpośrednio w przeglądarce.
  • Wybierz gotowe próbki czcionek zmiennych i ustawienia wstępne ruchu.
  • Dostosuj zakres animowanej osi, czas trwania, naprzemienność i tekst podglądu.
  • Skopiuj HTML i CSS, aby uzyskać animację czcionki o zmiennej czcionce tylko dla interfejsu użytkownika.

Jak animować tekst ze zmienną czcionką

  • Wybierz przykładową czcionkę zmienną.
  • Wybierz oś, którą chcesz animować, np. wagę, szerokość, rozmiar optyczny lub nachylenie.
  • Wybierz ustawienie wstępne i dostosuj czas trwania, przesunięcie oraz wartości od/do osi.
  • Edytuj tekst podglądu, aby przetestować animację w realistycznym układzie.
  • Skopiuj wygenerowany fragment kodu HTML i CSS dla swojego interfejsu użytkownika.

  • Jak działa animacja tekstu ze zmienną czcionką?Animuje OpenType zmienne osie czcionek za pomocą CSS font-variation-settings. Tekst pozostaje zaznaczalny i renderowany przez przeglądarkę.
  • Czy to działa tylko na froncie?Tak. Ten MVP używa przykładowych czcionek internetowych i przeglądarki CSS. Do podglądu na żywo nie jest wymagane żadne przetwarzanie backendowe.
  • Które osie czcionek można animować?Grubość, szerokość, rozmiar optyczny, nachylenie i osie niestandardowe można animować, gdy wybrana czcionka zmienna je eksponuje.
  • Czy mogę wyeksportować animację?Pierwsza wersja eksportuje HTML i CSS. Późniejsze wersje mogą łączyć się z narzędziami czcionek w celu przesyłania czcionek, sprawdzania poprawności i bogatszego eksportu animacji.

  • Podgląd ruchu na żywo

    Natychmiast przeglądaj animowaną typografię, korzystając z przykładowych czcionek zmiennych i natywnych dla przeglądarki CSS.

  • Sterowanie ruchem

    Kontroluj zakres osi, czas i opóźnienia liter bez ręcznego zapisywania klatek kluczowych.

  • Eksport frontendu

    Skopiuj HTML i CSS, które można dostosować do stron docelowych, prototypów interfejsu użytkownika lub eksperymentów.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.