Аніматор змінного шрифту

Анімація тексту зі змінними осями шрифту онлайн

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.