4 Βήματα για τη χρήση μεταβλητών γραμματοσειρών

Sep 17, 2025

πως να

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

(Πιστωτική πίστωση: μέλλον)

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

Χρήση της πηγής Sans Pro ως παράδειγμα, η μεταβλητή έκδοση της γραμματοσειράς είναι περίπου 394kb και έρχεται σε μια μεγάλη ποικιλία βαρών. Εάν χρησιμοποιήσουμε αυτά τα βάρη γραμματοσειράς ξεχωριστά ως τυπικά αρχεία γραμματοσειράς, είναι, κατά μέσο όρο, 234kb το καθένα - με αποτέλεσμα ένα συνδυασμένο μέγεθος αρχείου περίπου 1856kb. Φυσικά, αυτός ο υπολογισμός προϋποθέτει ότι όλα τα βάρη γραμματοσειράς υπάρχουν ξεχωριστά ως μια τυποποιημένη γραμματοσειρά, την οποία δεν το κάνουν. (Αν και αν ψάχνετε για απλά τακτικές γραμματοσειρές, ελέγξτε τη θέση μας στο καλύτερες δωρεάν γραμματοσειρές διαθέσιμος.)

Εάν αφαιρέσουμε τις γραμματοσειρές που δεν υπάρχουν ως τυποποιημένη γραμματοσειρά, το συνδυασμένο μέγεθος αρχείου είναι ακόμα σχεδόν τρεις φορές το μέγεθος της γραμμικής γραμματοσειράς και με σημαντικά λιγότερα στυλ. Ακόμα κι αν ήθελες μόνο τις τολμηρές και τακτικές εκδόσεις, κοινό σε πολλά έργα ιστού, δύο εκδόσεις της τυπικής πηγής SANS PRO γραμματοσειράς είναι ακόμα μεγαλύτερες από μια μοναδική γραμματοσειρά. Αυτό που καταδεικνύει ότι με μεταβλητές γραμματοσειρές έχουμε τη δυνατότητα να κάνουμε τεράστιες εξοικονομήσεις στο εύρος ζώνης χωρίς να διακυβεύουν τα σχέδια και τη δημιουργικότητά μας.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — Μια σύγκριση των μεγεθών αρχείων μιας σειράς βάρους γραμματοσειράς μεταξύ της τυπικής και μεταβλητής έκδοσης της πηγής γραμματοσειράς Sans Pro (Πιστωτική εικόνα: Mandy Michael)

Οι μεταβλητές γραμματοσειρές λειτουργούν με την παρεμβολή των κύριων παραλλαγών κατά μήκος ενός άξονα, κατασκευάζοντας ουσιαστικά νέα σημεία μεταξύ τους. Αυτό σημαίνει ότι θα μπορούσατε να ορίσετε βάρη γραμματοσειρών σε αυθαίρετα σημεία κατά μήκος του άξονα που παρουσιάζουν πολύ μεγαλύτερο αριθμό στυλ και παραλλαγές. Επιπλέον, οφείλεται στο γεγονός ότι οι μεταβλητές γραμματοσειρές μπορούν να παρεμποδιστούν ότι είμαστε σε θέση να ζωνταψήσουμε μεταξύ κάθε παραλλαγής, επιτρέποντας την ομαλή μεταβάσεις να πω ένα λεπτό βάρος σε ένα τολμηρό βάρος - κάτι που δεν μπορούμε ποτέ να επιτύχουμε πριν.

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

Θέλετε να τοποθετήσετε τις γραμματοσειρές σας σε μια νέα ιστοσελίδα; Για τους πόρους σχεδιασμού ιστοσελίδων, κατευθυνθείτε προς το καλύτερο οικοδόμος ιστότοπου roundup και pick of top web hosting Υπηρεσίες. Ή για αναβάθμιση αποθήκευσης, ελέγξτε αυτά αποθήκευση σύννεφων επιλογές.

01. Κατανόηση των αξόνων σε μεταβλητές γραμματοσειρές

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Εξετάζοντας την παρεμβολή μιας μεταβλητής γραμματοσειράς σε έναν άξονα βάρους και πλάτος αποκαλύπτει το εύρος προσαρμογής που είναι διαθέσιμο (Πιστωτική εικόνα: Mandy Michael)

Η χρήση μεταβλητών γραμματοσειρών στο CSS μας είναι πολύ παρόμοιο με το πώς κανονικά θα χρησιμοποιούσαμε γραμματοσειρές στο διαδίκτυο: χρησιμοποιώντας το @ γραμματοσειρά-πρόσωπο κατά κανόνα . Ωστόσο, πρέπει πρώτα να κατανοήσουμε τους διαφορετικούς τύπους αξόνων μέσα σε μια μεταβλητή γραμματοσειρά, καθώς αυτό καθορίζει ποιες ιδιότητες CSS χρησιμοποιούμε.

Υπάρχουν δύο τύποι αξόνων σε μια μεταβλητή γραμματοσειρά: ένας καταχωρημένος άξονας και ένας προσαρμοσμένος άξονας. Ένας καταχωρημένος άξονας αναφέρεται σε έναν άξονα που είναι αρκετά κοινό ότι αξίζει τον κόπο τυποποίησης. Υπάρχουν επί του παρόντος πέντε καταχωρημένους άξονες. Βάρος, πλάτος, κλίση, πλάτος και οπτικό μέγεθος και αυτά αντιστοιχούν συχνά σε υπάρχουσες ιδιότητες CSS, όπως το βάρος γραμματοσειράς.

Οι προσαρμοσμένοι άξονες ορίζονται από τους σχεδιαστές τύπου, μπορεί να είναι οποιοδήποτε είδος παραλλαγής και απαιτεί μόνο ένα αναγνωριστικό τεσσάρων γραμμάτων στο αρχείο γραμματοσειράς, το οποίο μπορεί να αναφέρεται στο CSS.

02. Χρησιμοποιήστε έναν καταχωρημένο άξονα

A range of variable font weights along an axis from light (200) to black (900). — Οι παραλλαγές βάρους ορίζονται σε έναν άξονα, από το φως (200) έως το μαύρο (900) (Πιστωτική εικόνα: Mandy Michael)

Όταν πρόκειται για έναν καταχωρημένο άξονα, θέλουμε να βεβαιωθούμε ότι χρησιμοποιούμε οποιεσδήποτε σχετικές ιδιότητες CSS, για παράδειγμα, το βάρος γραμματοσειράς ή γραμματοσειράς.

Μπορούμε να ρυθμίσουμε τις γραμματοσειρές μας χρησιμοποιώντας το @ γραμματοσειρά-πρόσωπο κατά κανόνα Καθώς κανονικά θα είμαστε. Η αλλαγή είναι πώς ορίζουμε τις παραλλαγές για περιγραφείς όπως το βάρος γραμματοσειράς, γραμματοσειράς και στιλ γραμματοσειράς. Προηγουμένως θα έχουμε ορίσει ένα βάρος γραμματοσειράς 200 και θα ορίσει αυτό ως η φωτεινή έκδοση της γραμματοσειράς, τότε θα δημιουργήσαμε ένα άλλο μπλοκ προσώπου γραμματοσειράς για την τολμηρή έκδοση και την τακτική έκδοση μέχρι να είχαμε όλα τα βάρη που απαιτούνται για ο σχεδιασμός. Με μεταβλητές γραμματοσειρές, χρειαζόμαστε μόνο ένα μόνο μπλοκ προσώπου γραμματοσειράς. Έτσι, αντί να χρησιμοποιείτε πολλαπλές περιπτώσεις, καθορίζουμε ένα εύρος τιμών που αντιστοιχούν στις ελάχιστες και μέγιστες τιμές που ορίζονται στον άξονα γραμματοσειράς.

 @ font-face {
Font-οικογένεια: "Μεταβλητή πηγή Sans".
SRC: URL ("Source-Sans-Marable.woff") μορφή ("Παραλλαγές Woff").
Γραμματοσειρά γραμματοσειράς: 200 700;
}

Σε αυτό το παράδειγμα, ορίζουμε ένα βάρος γραμματοσειράς 200 έως 700. Μόλις ορίζεται η σειρά μας, μπορούμε να επιλέξουμε οποιοδήποτε αριθμό εντός αυτού του εύρους ως το βάρος της γραμματοσειράς μας, για παράδειγμα το 658. Είναι σημαντικό αν ορίσετε το βάρος γραμματοσειράς σας ως 200 έως 700 και Στη συνέχεια, προσπαθήστε να ορίσετε ένα βάρος 900, ακόμη και αν η γραμματοσειρά έχει ένα βάρος 900 που ορίζεται στον άξονά του, δεν θα μπορείτε να το χρησιμοποιήσετε. Το εύρος ορίζει τι έχετε πρόσβαση στο CSS σας.

03. Ρυθμίστε τους προσαρμοσμένους άξονες

Δεδομένου ότι δεν θα υπάρξουν προϋπάρχουσες ιδιότητες CSS όταν χρησιμοποιείτε έναν προσαρμοσμένο άξονα, πρέπει να χρησιμοποιήσουμε μια νέα ιδιοκτησία CSS που ονομάζεται Ρυθμίσεις γραμματοσειρών γραμματοσειρών. Αυτό θα μας επιτρέψει να ορίσουμε όσους ονομάζονται και προσαρμοσμένους άξονες όπως χρειαζόμαστε.

 H1 {
Γραμματοσειρά: «Η μεταβλητή γραμματοσειρά μου».
Ρυθμίσεις γραμματοσειράς - Ρυθμίσεις: «WGHT» 375, «INLI» 88.
}

Στο παράδειγμα, το WGHT αναφέρεται στον καταχωρημένο άξονα βάρους και ο Inli αναφέρεται σε έναν προσαρμοσμένο άξονα που ονομάζεται Inline, το καθένα με μια σχετική τιμή αριθμού που αντιστοιχεί σε ένα σημείο κατά μήκος του άξονα της παραλλαγής. Ενώ μπορείτε να αναφέρετε έναν καταχωρημένο άξονα ως τιμή για τις ρυθμίσεις παραλλαγής γραμματοσειράς, συνιστάται να χρησιμοποιείτε τις ιδιότητες χαρτογραφημένου CSS αντί.

Για να εξασφαλίσουμε την υποστήριξη στα παλαιότερα προγράμματα περιήγησης, μπορούμε να χρησιμοποιήσουμε τα Fallback γραμματοσειρές για μη υποστηριζόμενα προγράμματα περιήγησης χρησιμοποιώντας τη χρήση της ανίχνευσης χαρακτηριστικών CSS.

 H1 {
  Οικογένεια γραμματοσειράς: "Πηγή Sans", Sans-Serif.
  Γραμματοσειρά γραμματοσειράς: 700;
}

@Supports (Ρυθμίσεις παραλλαγής γραμματοσειράς: Κανονική) {
h1 {
 Γραμματοσειρά: "Decovar".
 Ρυθμίσεις γραμματοσειράς: "inli" 88;
 }
}

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

04. Συνδυάστε javascript και μεταβλητή γραμματοσειρά

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Οι μεταβλητές γραμματοσειρές επιτρέπουν τις ομαλές μεταβάσεις από, να πούμε, ένα λεπτό σε ένα τολμηρό βάρος. Αυτό σας επιτρέπει να δημιουργείτε ομαλές μετασχηματισμούς που χρησιμοποιούν μεταβλητές JavaScript (Πιστωτική εικόνα: Mandy Michael)

Μπορούμε να χρησιμοποιήσουμε συμβάντα JavaScript για καταστάσεις όπου θέλουμε πιο λεπτό-συντονισμένο έλεγχο ή να αλλάξουμε τη γραμματοσειρά βασισμένη σε γεγονότα που δεν έχουμε πρόσβαση μόνο με το CSS. Ένα απλό παράδειγμα θα ταιριάζει με το βάρος της γραμματοσειράς μας με το μέγεθος της προβολής μας - καθώς το παράθυρο προβολής γίνεται μικρότερο, το βάρος γραμματοσειράς γίνεται βαρύτερο.

Προκειμένου να δημιουργηθεί η κλίμακα υγρού, πρέπει να ευθυγραμμίσουμε δύο σύνολα τιμών και μονάδων - το βάρος γραμματοσειράς και το μέγεθος προβολής. Μπορούμε να έχουμε πρόσβαση στο τρέχον πλάτος προβολής χρησιμοποιώντας το Window.Innerwidth και να δημιουργήσετε μια νέα κλίμακα με βάση το ποσοστό μετατρέποντάς το σε μια περιοχή 0-0.99. Συμπεριλαμβάνοντας τα ελάχιστα και τα μέγιστα μεγέθη προβολής που μπορούμε να ελέγξουμε το φάσμα του αποτελέσματος.

 var viewportscale =
(window.innerwidth - minwindoosize) / (maxwindoosize - minwindoosize);

Στη συνέχεια προσδιορίζουμε το βάρος γραμματοσειράς βάσει του μεγέθους προβολής μας.

 var fontweightscale = viewportcale * (minfontweight - maxfontweight) + maxfontweight;

Χρησιμοποιώντας CSS προσαρμοσμένες ιδιότητες, μπορούμε να χρησιμοποιήσουμε την αξία JavaScript μας για να ενημερώσετε το βάρος της γραμματοσειράς στο CSS μας.

 P.Style.Setproperty ("- βάρος", γραμματοσειράς).

Όταν αυτό συνδυάζεται σε μια λειτουργία και προσαρτημένη στον ακροατή εκδήλωσης μεγέθους, μπορούμε να ενημερώσουμε το βάρος γραμματοσειράς με βάση το νέο μέγεθος του παραθύρου.

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

Μπορείς Προβολή του κώδικα Για αυτό στο Codepen.

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 318 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Εγγραφείτε στο καθαρό εδώ .

Ανακαλύψτε περισσότερα για τις μεταβλητές γραμματοσειρές στη δημιουργία CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Credit Image: Getty / Bianca Betning / Future)

Στην ομιλία της στη δημιουργία CSS, η εστιασμένη CSS Conference για τους σχεδιαστές ιστοσελίδων που λαμβάνει χώρα στις 26 Σεπτεμβρίου 2019 στο Rich Mix, το Λονδίνο, η Bianca Batning θα διερευνήσει τον τρόπο με τον οποίο οι μεταβλητές γραμματοσειρές μπορούν να δημιουργήσουν νέες ευκαιρίες για τη γραπτή λέξη στα παραδοσιακά μέσα, καθώς και νέα, εντυπωσιακά εμπειρίες, όπως η AR, VR και η μικτή πραγματικότητα.

Εάν θέλετε να πιάσετε αυτό και άλλες μεγάλες συνομιλίες, αξίζει να χτυπήσετε τα εισιτήριά σας τώρα. Εάν αρπάξετε τη δική σας πριν από το 5pm UTC στις 15 Αυγούστου, μπορείτε να εξοικονομήσετε £ 50, πληρώντας μόνο £ 199 + ΦΠΑ. Αγοράστε το εισιτήριό σας τώρα !

Σχετικά Άρθρα:

3 τρόποι Tech αλλάζει τον τύπο
Ξεκινήστε με μεταβλητές γραμματοσειρές στο CSS
Μετατρέψτε τον τύπο σας σε απευθείας σύνδεση με μεταβλητές γραμματοσειρές

4 Βήματα για τη χρήση μεταβλητών γραμματοσειρών

01. Κατανόηση των αξόνων σε μεταβλητές γραμματοσειρές

02. Χρησιμοποιήστε έναν καταχωρημένο άξονα

03. Ρυθμίστε τους προσαρμοσμένους άξονες

04. Συνδυάστε javascript και μεταβλητή γραμματοσειρά

Ανακαλύψτε περισσότερα για τις μεταβλητές γραμματοσειρές στη δημιουργία CSS

πως να - Τα πιο δημοφιλή άρθρα

Πώς να βελτιώσετε το χαρτοφυλάκιο σχεδιασμού σας

Πώς να σχεδιάσετε πιο ρεαλιστικά στοιχεία

Σχεδιαστής συγγένειας: Πώς να χρησιμοποιήσετε περιορισμούς

3 Συμβουλές για τη χειροτεχνία εκπληκτικό διαφημιστικό υλικό εκτύπωσης

Δημιουργία πορτρέτου τέχνης στο Corel Painter

Δημιουργήστε μια εφαρμογή υλικού σχεδιασμού με γωνιακό 2

Δημιουργήστε οργανικές υφές σε μελάνι

Πώς να κάνετε το Wordpress Website Multingual

Κατηγορίες