Animator μεταβλητής γραμματοσειράς

Κινούμενη κίνηση κειμένου με μεταβλητούς άξονες γραμματοσειράς στο διαδίκτυο

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

Οι μεταβλητές γραμματοσειρές καθιστούν δυνατή την κίνηση της τυπογραφίας χωρίς εναλλαγή αρχείων γραμματοσειράς ή απόδοση κειμένου ως εικόνες. Αυτό το online Variable Font Animator αλλάζει άξονες παραλλαγής OpenType, όπως βάρος, πλάτος, οπτικό μέγεθος, κλίση και προσαρμοσμένους άξονες με CSS.

Η πρώτη έκδοση εκτελείται πλήρως στο πρόγραμμα περιήγησης. Επιλέξτε ένα δείγμα γραμματοσειράς, επιλέξτε έναν άξονα, συντονίστε τις ρυθμίσεις κίνησης και αντιγράψτε τα HTML και CSS που δημιουργούνται. Είναι ένα ελαφρύ frontend MVP που προορίζεται για γρήγορο πειραματισμό πριν συνδεθούν βαθύτερες ροές εργασίας εξαγωγής.

  • Κινούμενοι άξονες μεταβλητής γραμματοσειράς απευθείας στο πρόγραμμα περιήγησής σας.
  • Επιλέξτε έτοιμα δείγματα μεταβλητής γραμματοσειράς και προεπιλογές κίνησης.
  • Συντονίστε το εύρος των κινούμενων αξόνων, τη διάρκεια, το stagger και το κείμενο προεπισκόπησης.
  • Αντιγράψτε τα HTML και CSS για μια κινούμενη εικόνα μεταβλητής γραμματοσειράς μόνο στο frontend.

Πώς να κάνετε κίνηση μεταβλητής γραμματοσειράς

  • Επιλέξτε ένα δείγμα μεταβλητής γραμματοσειράς.
  • Επιλέξτε τον άξονα που θέλετε να κάνετε κίνηση, όπως βάρος, πλάτος, οπτικό μέγεθος ή κλίση.
  • Επιλέξτε μια προεπιλογή και προσαρμόστε τις τιμές διάρκειας, κλιμάκωσης και από/προς άξονα.
  • Επεξεργαστείτε το κείμενο προεπισκόπησης για να δοκιμάσετε την κινούμενη εικόνα σε μια ρεαλιστική διάταξη.
  • Αντιγράψτε το απόσπασμα HTML και CSS που δημιουργήθηκε για τη διεπαφή σας.

  • Πώς λειτουργεί το κινούμενο κείμενο μεταβλητής γραμματοσειράς;Ενεργοποιεί μεταβλητούς άξονες γραμματοσειράς OpenType με CSS font-variation-settings. Το κείμενο παραμένει επιλέξιμο και αποδίδεται από το πρόγραμμα περιήγησης.
  • Αυτό τρέχει μόνο στο frontend;Ναι. Αυτό το MVP χρησιμοποιεί μόνο δείγματα γραμματοσειρών ιστού και πρόγραμμα περιήγησης CSS. Δεν απαιτείται επεξεργασία backend για τη ζωντανή προεπισκόπηση.
  • Ποιοι άξονες γραμματοσειράς μπορούν να κινηθούν;Το βάρος, το πλάτος, το οπτικό μέγεθος, η κλίση και οι προσαρμοσμένοι άξονες μπορούν να κινούνται όταν η επιλεγμένη μεταβλητή γραμματοσειρά τους εκθέτει.
  • Μπορώ να εξάγω το κινούμενο σχέδιο;Η πρώτη έκδοση εξάγει τα HTML και CSS. Οι νεότερες εκδόσεις μπορούν να συνδεθούν με εργαλεία γραμματοσειράς για μεταφορτωμένες γραμματοσειρές, επικύρωση και πλουσιότερες εξαγωγές κινούμενων εικόνων.

  • Προεπισκόπηση Live Motion

    Κάντε αμέσως προεπισκόπηση της κινούμενης τυπογραφίας με δείγματα μεταβλητών γραμματοσειρών και του προγράμματος περιήγησης CSS.

  • Χειριστήρια κίνησης

    Έλεγχος εύρους αξόνων, χρονισμού και καθυστερήσεων γραμμάτων χωρίς μη αυτόματη εγγραφή βασικών καρέ.

  • Frontend Export

    Αντιγράψτε τα HTML και CSS που μπορούν να προσαρμοστούν για σελίδες προορισμού, πρωτότυπα διεπαφής χρήστη ή πειράματα.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.