Animator Font Variabel

Menganimasikan teks dengan sumbu font variabel secara online

Animate variable fonts with CSS.

Dihasilkan HTML dan 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

Font variabel memungkinkan untuk menganimasikan tipografi tanpa menukar file font atau merender teks sebagai gambar. Animator Font Variabel online ini mengubah sumbu variasi OpenType seperti berat, lebar, ukuran optik, kemiringan, dan sumbu khusus dengan CSS.

Versi pertama berjalan sepenuhnya di browser. Pilih font sampel, pilih sumbu, sesuaikan pengaturan gerakan, dan salin HTML dan CSS yang dihasilkan. Ini adalah frontend ringan MVP yang ditujukan untuk eksperimen cepat sebelum alur kerja ekspor yang lebih dalam dihubungkan.

  • Animasikan sumbu font variabel langsung di browser Anda.
  • Pilih contoh font variabel dan preset gerakan yang sudah jadi.
  • Sesuaikan rentang sumbu animasi, durasi, stagger, dan teks pratinjau.
  • Salin HTML dan CSS untuk animasi font variabel khusus frontend.

Cara menganimasikan teks font variabel

  • Pilih contoh font variabel.
  • Pilih sumbu yang ingin Anda animasikan, seperti berat, lebar, ukuran optik, atau kemiringan.
  • Pilih preset dan sesuaikan durasi, stagger, dan nilai dari/ke sumbu.
  • Edit teks pratinjau untuk menguji animasi dalam tata letak yang realistis.
  • Salin cuplikan HTML dan CSS yang dihasilkan untuk frontend Anda.

  • Bagaimana cara kerja animasi teks font variabel?Ini menganimasikan sumbu font variabel OpenType dengan CSS font-variation-settings. Teks tetap dapat dipilih dan dirender oleh browser.
  • Apakah ini hanya berjalan di frontend?Ya. MVP ini hanya menggunakan contoh font web dan browser CSS. Tidak diperlukan pemrosesan backend untuk pratinjau langsung.
  • Sumbu font manakah yang dapat dianimasikan?Berat, lebar, ukuran optik, kemiringan, dan sumbu khusus dapat dianimasikan ketika font variabel yang dipilih menampilkannya.
  • Bisakah saya mengekspor animasinya?Versi pertama mengekspor HTML dan CSS. Versi yang lebih baru dapat terhubung ke alat font untuk font yang diunggah, validasi, dan ekspor animasi yang lebih kaya.

  • Pratinjau Gerakan Langsung

    Pratinjau tipografi animasi segera dengan contoh font variabel dan CSS asli browser.

  • Kontrol Gerakan

    Kontrol rentang sumbu, waktu, dan penundaan huruf tanpa menulis bingkai utama secara manual.

  • Ekspor Bagian Depan

    Salin HTML dan CSS yang dapat disesuaikan untuk laman landas, prototipe UI, atau eksperimen.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.