Аниматор с променлив шрифт

Анимирайте текст с променливи оси на шрифта онлайн

Animate variable fonts with CSS.

Генерирани HTML и 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

Променливите шрифтове правят възможно анимирането на типография без размяна на файлове с шрифтове или изобразяване на текст като изображения. Този онлайн аниматор на променлив шрифт променя OpenType осите на вариации като тегло, ширина, оптичен размер, наклон и потребителски оси с CSS.

Първата версия работи изцяло в браузъра. Изберете примерен шрифт, изберете ос, настройте настройките за движение и копирайте генерираните HTML и CSS. Това е олекотен интерфейс MVP, предназначен за бързо експериментиране, преди да се свържат по-дълбоки работни процеси за експортиране.

  • Анимирайте променливите оси на шрифта директно във вашия браузър.
  • Изберете готови образци на променливи шрифтове и предварително зададени настройки за движение.
  • Настройте обхвата на анимираната ос, продължителността, залитането и текста за визуализация.
  • Копирайте HTML и CSS за анимация с променлив шрифт само за интерфейса.

Как да анимирате текст с променлив шрифт

  • Изберете примерен променлив шрифт.
  • Изберете оста, която искате да анимирате, като тегло, ширина, оптичен размер или наклон.
  • Изберете предварително зададена настройка и коригирайте продължителността, залитането и стойностите на оста от/до.
  • Редактирайте текста за визуализация, за да тествате анимацията в реалистично оформление.
  • Копирайте генерирания HTML и CSS фрагмент за вашия интерфейс.

  • Как работи анимацията на текст с променлив шрифт?Той анимира OpenType променливите оси на шрифта с CSS font-variation-settings. Текстът остава избираем и изобразяван от браузъра.
  • Това работи ли само във фронтенда?да Този MVP използва само примерни уеб шрифтове и браузър CSS. За предварителния преглед на живо не е необходима обработка в задната част.
  • Кои оси на шрифта могат да бъдат анимирани?Тегло, ширина, оптичен размер, наклон и персонализирани оси могат да бъдат анимирани, когато избраният променлив шрифт ги изложи.
  • Мога ли да експортирам анимацията?Първата версия експортира HTML и CSS. По-късните версии могат да се свързват с инструменти за шрифтове за качени шрифтове, валидиране и по-богати експорти на анимации.

  • Преглед на движение на живо

    Визуализирайте незабавно анимирана типография с примерни променливи шрифтове и нативни за браузъра CSS.

  • Контроли за движение

    Контролирайте обхвата на оста, времето и закъсненията на буквите, без да пишете ключови кадри ръчно.

  • Експортиране на предния край

    Копирайте HTML и CSS, които могат да бъдат адаптирани за целеви страници, прототипи на потребителския интерфейс или експерименти.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.