Πώς να χρησιμοποιήσετε γραμματοσειρές Web

Sep 13, 2025

πως να

Τα παρακάτω είναι ένα απόσπασμα που λαμβάνεται από το Εγχειρίδιο WebFont του Bram Stein. Αγοράστε το εδώ .

Web γραμματοσειρές ορίζονται στο CSS μέσω του @ Font-Face κανόνας. Εάν είστε προγραμματιστής ιστού, πιθανότατα έχετε σχεδιαστεί, αντιγραφεί και επικολλήσει, ή τουλάχιστον βλέπετε ένα @ Font-Face κανόνας.

Για χάρη της πληρότητας, όμως, ας περάσουμε γρήγορα ένα βασικό παράδειγμα:

 @ font-face {
  Γραμματοσειρά: Elena;
  SRC: URL (Elena-κανονική.woff);
}

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

Εδώ, αν η Έλενα αποτύχει να φορτώσει, το πρόγραμμα περιήγησης θα πέσει πίσω στο γενικό ελαφρή γραμμή Οικογένεια γραμματοσειράς:

 P {
  Γραμματοσειρά: Elena, Serif.
}

Υπάρχουν περισσότερα στις γραμματοσειρές, αλλά για τώρα, ας κρατήσουμε τη στοιβασία γραμματοσειράς μας απλή, συμπεριλαμβάνοντας μόνο το γενικό ελαφρή γραμμή και Σανς σέριφ Οικογένειες γραμματοσειράς.

Οικογένειες γραμματοσειράς

Η δημιουργία μιας οικογένειας γραμματοσειράς με πολλαπλά στυλ επιτυγχάνεται με τη δημιουργία ενός @ Font-Face Κανόνας για κάθε στυλ και χρησιμοποιώντας το ίδιο Οικογένεια γραμματοσειράς όνομα. Το ακόλουθο @ Font-Face Οι κανόνες δημιουργούν μια οικογένεια με κανονικό και έντονο στυλ:

 @ font-face {
     Γραμματοσειρά: Elena;
     SRC: URL (Elena-κανονική.woff);
     Γραμματοσειρά γραμματοσειράς: κανονική;
}
   @ Font-face {
     Γραμματοσειρά: Elena;
     SRC: URL (Elena-Bold.woff);
     Γραμματοσειρά γραμματοσειράς: Bold.
}

Μπορείτε να χρησιμοποιήσετε αυτήν την οικογένεια γραμματοσειρών στο CSS σας αναφέροντας το οικογενειακό όνομα και το βάρος στους επιλογείς σας. Αυτό ισχύει το κανονικό στυλ στις παραγράφους και το τολμηρό στυλ ισχυρός Παραγράφους:

 P {
  Γραμματοσειρά: Elena, Serif;
}

p ισχυρή {
  Γραμματοσειρά γραμματοσειράς: Bold.
}

εκτός Γραμματοσειρά , @ Font-Face Επίσης, δέχεται το στυλ γραμματοσειράς και γραμματοσειρά περιγραφείς ιδιοκτησίας, οι οποίες ορίζουν στυλ όπως πλάγια και συμπυκνωμένα. Και οι τρεις περιγραφείς ιδιοκτησίας μπορούν να χρησιμοποιηθούν για τη δημιουργία μιας ενιαίας οικογένειας γραμματοσειράς με πολλαπλά στυλ. Θεωρητικά, αυτό σας επιτρέπει να δημιουργήσετε μια οικογένεια που περιέχει 243 μεμονωμένα στυλ (εννέα Γραμματοσειρά τιμές × τρία στυλ γραμματοσειράς τιμές × εννέα γραμματοσειρά αξίες).

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

Click the icon in the top right to enlarge the image — Κάντε κλικ στο εικονίδιο στην επάνω δεξιά πλευρά για μεγέθυνση της εικόνας

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

Μορφές γραμματοσειρών

ο src Ο περιγραφέας λέει ένα πρόγραμμα περιήγησης όπου να πάρετε ένα αρχείο γραμματοσειράς. Τα προηγούμενα παραδείγματα χρησιμοποίησαν μια ενιαία μορφή γραμματοσειράς, αλλά συχνά βλέπετε τις διευθύνσεις URL σε πολλαπλές μορφές γραμματοσειράς σε συνδυασμό με συμβουλές μορφοποίησης, οι οποίες προσαρτώνται μετά τη διεύθυνση URL χρησιμοποιώντας το Μορφή ("τιμή") σύνταξη.

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

 @ font-face {
  Γραμματοσειρά: Elena;
  SRC: Μορφή URL (Elena-κανονική.woff2) ("woff2"),
       URL (Elena-κανονική.woff) μορφή ("Woff").
}

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

Παρόλο που οι μορφοποιημένες συμβουλές είναι προαιρετικές, πάντα να τις συμπεριλάβουν - αφήνουν το πρόγραμμα περιήγησης να γνωρίζει τη μορφή χωρίς να χρειάζεται να κατεβάσει τη γραμματοσειρά. Για παράδειγμα, εάν ένα πρόγραμμα περιήγησης δεν υποστηρίζει το WOFF2, αλλά υποστηρίζει το Woff, μπορεί να παραλείψει το αρχείο γραμματοσειράς Woff2 με βάση την υπόδειξη της μορφής.

Τα προγράμματα περιήγησης υποστηρίζουν διάφορες μορφές γραμματοσειράς ιστού: OpenType (TrueType), EOT, Woff και Woff2. Ορισμένα προγράμματα περιήγησης υποστηρίζουν επίσης γραμματοσειρές SVG, αλλά καταρρέουν και δεν πρέπει πλέον να χρησιμοποιηθούν (και δεν πρέπει να συγχέονται με το Νέα μορφή opentyype-svg ).

Το EOT, το Woff και το Woff2 είναι τεχνικά όχι μορφές γραμματοσειρών. Είναι συμπιεσμένα αρχεία opentype με ποικίλους βαθμούς συμπίεσης. Το Woff2 προσφέρει την καλύτερη συμπίεση, ακολουθούμενη από Woff και EOT.

Κατά την έρευνα κάλυψης για όλα τα προγράμματα περιήγησης, μπορεί να έχετε συναντήσει κάτι που ονομάζεται αλεξίσφαιρος @ Font-Face σύνταξη με το fontspring.

Το bulletproof syntax χρησιμοποιεί EOT, Woff2, Woff, RAW OPENTYPE και SVG αρχεία γραμματοσειράς για μέγιστη κάλυψη του προγράμματος περιήγησης:

 @ font-face {
  Γραμματοσειρά: Elena;
  SRC: URL (Elena.eot; #iefix) μορφή ("ενσωματωμένος-opentype"),
       Μορφή URL (elena.woff2) ("woff2"),
       URL (elena.woff) μορφή ("woff"),
       URL (elena.otf) μορφή ("opentype"),
       URL (elena.svg # Elena) μορφή ("SVG").
}

Η πρώτη γραμμή URL μπορεί να φανεί λίγο περίεργο για εσάς. Οι εκδόσεις του Internet Explorer 8 και παρακάτω δεν υποστηρίζουν τη σύνταξη για πολλαπλές μορφές γραμματοσειράς και θεραπεύστε ολόκληρη την τιμή του src ιδιοκτησία ως διεύθυνση URL.

Το Bulletproof Syntax Tricks Internet Explorer 8 και παρακάτω θεωρείται ότι οι υπόλοιπες διευθύνσεις URL αποτελούν μέρος του αναγνωριστικού θραύσματος της πρώτης διεύθυνσης URL. Επειδή τα αναγνωριστικά θραυσμάτων αγνοούνται κατά τη λήψη αρχείων, ο Internet Explorer 8 και παρακάτω χρησιμοποιήστε την πρώτη διεύθυνση URL.

Τα προγράμματα περιήγησης εκτός του Internet Explorer θα παραλείπουν τη γραμμή επειδή δεν υποστηρίζουν το EOT.

Οι υπόλοιπες καταχωρήσεις είναι αυτό που θα περίμενείτε: μορφές γραμματοσειράς που αναφέρονται κατά σειρά προτίμησης.

Αλλά είναι το BulletProof Syntax ακόμα σχετικό; Όχι. Στην πραγματικότητα, νομίζω ότι είναι επιβλαβές. Οι γραμματοσειρές SVG καταρρέουν και υποστηρίζονται μόνο από προγράμματα περιήγησης που δεν χρησιμοποιούνται πλέον.

Οι περισσότεροι ιστότοποι υποστηρίζουν τον Internet Explorer 9 και πάνω, όμως η σύνταξη απαριθμεί ο EOT ως η πρώτη προτιμώμενη μορφή γραμματοσειράς. Παρόλο που ο Internet Explorer 9 και Up Υποστήριξη Woff, αυτές οι εκδόσεις θα μεταφορτώσουν ακόμα το αρχείο EOT, απλώς και μόνο επειδή αναφέρεται πρώτα.

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

 @ font-face {
  Γραμματοσειρά: Elena;
  SRC: Μορφή URL (Elena.Woff2) ("WOFF2"),
       URL (elena.woff) μορφή ("woff"),
       URL (elena.otf) μορφή ("opentype").
}

Παρόλο που οι παλαιότερες εκδόσεις του Android εξακολουθούν να χρησιμοποιούνται, η παγκόσμια εξάρτηση από αυτά τα προγράμματα περιήγησης μειώνεται γρήγορα. Σύντομα θα είστε πιθανώς σε θέση να ρίξετε την ακατέργαστη μορφή opentype και να απλοποιήσετε ακόμα περισσότερο τη σύνταξη:

 @ font-face {
  Γραμματοσειρά: Elena;
  SRC: Μορφή URL (Elena.Woff2) ("WOFF2"),
       Μορφή URL (Elena.Woff) ("Woff").
}

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

Υπάρχει μια άλλη πιθανή τιμή για το src Περιγραφέας. ο τοπικός Η λειτουργία παίρνει το όνομα μιας τοπικής οικογένειας γραμματοσειράς. Εάν η γραμματοσειρά συμβαίνει να εγκατασταθεί στο σύστημα, το πρόγραμμα περιήγησης θα χρησιμοποιήσει αυτό αντ 'αυτού, αποφεύγοντας έτσι μια επιπλέον λήψη.

 @ font-face {
  Γραμματοσειρά: Elena;
  SRC: Τοπικό ("Έλενα"),
       URL (Elena-κανονική.woff2) μορφή ("woff2"),
       URL (Elena-κανονική.woff) μορφή ("Woff").
}

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

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

Αυτό είναι ένα απόσπασμα από το Bram Stein's Εγχειρίδιο WebFont , από ένα βιβλίο. Σε αυτό, διερευνά τι να εξετάσει κατά την επιλογή γραμματοσειρών Web, πώς να τα χρησιμοποιήσετε αποτελεσματικά και πώς να βελτιστοποιήσετε την απόδοση.

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

Τι κόλαση είναι blockchain;
30 επεκτάσεις χρώμιο για σχεδιαστές ιστοσελίδων και devs
20 εκπληκτικές δωρεάν γραμματοσειρές Web Google

Πώς να χρησιμοποιήσετε γραμματοσειρές Web

Οικογένειες γραμματοσειράς

Μορφές γραμματοσειρών

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

Πώς να προσθέσετε ενέργεια στα σχέδια της ζωής σας

21 τρόποι βελτιστοποίησης του CSS σας και επιταχύνετε τον ιστότοπό σας

Πώς να δημιουργήσετε αντικείμενα κειμένου και εικόνων στο CSS

5 τρόποι να ενισχύσετε το SEO του ιστότοπού σας

Δημιουργία πινέλου ματιών μετατόπισης διάνυσμα

12 Συμβουλές για ρεαλιστικό φωτισμό 3D

Πώς να λιώσει ένα 3D αντικείμενο με τρεις.js

γαμπρός ένα ακαταμάχητα γούνινο πλάσμα

Κατηγορίες