Değişken Yazı Tipi Animatörü

Metni değişken yazı tipi eksenleriyle çevrimiçi canlandırın

Animate variable fonts with CSS.

HTML ve CSS oluşturuldu

<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

Değişken yazı tipleri, yazı tipi dosyalarını değiştirmeden veya metni resim olarak işlemeden tipografiyi canlandırmayı mümkün kılar. Bu çevrimiçi Değişken Yazı Tipi Animatörü OpenType ağırlık, genişlik, optik boyut, eğim gibi varyasyon eksenlerini ve özel eksenleri CSS ile değiştirir.

İlk sürüm tarayıcıda tamamen çalışır. Örnek bir yazı tipi seçin, bir eksen seçin, hareket ayarlarını yapın ve oluşturulan HTML ve CSS'yi kopyalayın. Daha derin dışa aktarma iş akışları bağlanmadan önce hızlı denemeler yapmayı amaçlayan hafif bir ön uç MVP'dir.

  • Değişken yazı tipi eksenlerini doğrudan tarayıcınızda canlandırın.
  • Hazır değişken yazı tipi örneklerini ve hareket ön ayarlarını seçin.
  • Animasyonlu eksen aralığını, süreyi, kademelendirmeyi ve önizleme metnini ayarlayın.
  • Yalnızca ön uç değişken yazı tipi animasyonu için HTML ve CSS'yi kopyalayın.

Değişken yazı tipi metni nasıl canlandırılır

  • Örnek bir değişken yazı tipi seçin.
  • Ağırlık, genişlik, optik boyut veya eğim gibi, canlandırmak istediğiniz ekseni seçin.
  • Bir ön ayar seçin ve süreyi, kademelendirmeyi ve eksenden/eksene değerlerini ayarlayın.
  • Animasyonu gerçekçi bir düzende test etmek için önizleme metnini düzenleyin.
  • Kullanıcı arabiriminiz için oluşturulan HTML ve CSS snippet'ini kopyalayın.

  • Değişken yazı tipi metin animasyonu nasıl çalışır?OpenType değişken yazı tipi eksenlerini CSS font-variation-settings ile canlandırır. Metin seçilebilir durumda kalır ve tarayıcı tarafından oluşturulur.
  • Bu sadece ön uçta mı çalışıyor?Evet. Bu MVP yalnızca örnek web yazı tiplerini ve CSS tarayıcısını kullanır. Canlı önizleme için arka uç işlemine gerek yoktur.
  • Hangi yazı tipi eksenleri canlandırılabilir?Ağırlık, genişlik, optik boyut, eğim ve özel eksenler, seçilen değişken yazı tipi bunları ortaya çıkardığında canlandırılabilir.
  • Animasyonu dışa aktarabilir miyim?İlk sürüm HTML ve CSS'yi dışa aktarır. Daha sonraki sürümler, yüklenen yazı tipleri, doğrulama ve daha zengin animasyon dışa aktarımları için yazı tipi araçlarına bağlanabilir.

  • Canlı Hareket Önizlemesi

    Örnek değişken yazı tipleri ve tarayıcıya özgü CSS ile animasyonlu tipografiyi anında önizleyin.

  • Hareket Kontrolleri

    Ana kareleri manuel olarak yazmaya gerek kalmadan eksen aralığını, zamanlamayı ve harf gecikmelerini kontrol edin.

  • Ön Uç Dışa Aktarma

    Açılış sayfaları, kullanıcı arayüzü prototipleri veya denemeler için uyarlanabilecek HTML ve CSS'yi kopyalayın.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.