Εμφάνιση γραμματοσειράς - CSS-Κόλπα

Η font-displayιδιότητα καθορίζει τον τρόπο φόρτωσης και εμφάνισης αρχείων γραμματοσειράς από το πρόγραμμα περιήγησης. Εφαρμόζεται στον @font-faceκανόνα που ορίζει προσαρμοσμένες γραμματοσειρές σε ένα φύλλο στυλ.

@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )

Αξίες

Η font-displayιδιότητα δέχεται πέντε τιμές:

• auto(προεπιλογή): Επιτρέπει στο πρόγραμμα περιήγησης να χρησιμοποιεί την προεπιλεγμένη μέθοδο φόρτωσής του, η οποία συνήθως είναι παρόμοια με την blockτιμή.
• block: Δίνει εντολή στο πρόγραμμα περιήγησης να κρύψει σύντομα το κείμενο έως ότου ολοκληρωθεί η λήψη της γραμματοσειράς. Ακριβέστερα, το πρόγραμμα περιήγησης σχεδιάζει το κείμενο με ένα αόρατο σύμβολο κράτησης θέσης και, στη συνέχεια, το ανταλλάσσει με την προσαρμοσμένη όψη της γραμματοσειράς μόλις φορτωθεί. Αυτό είναι επίσης γνωστό ως «λάμψη αόρατου κειμένου» ή FOIT.
• swap: Δίνει εντολή στο πρόγραμμα περιήγησης να χρησιμοποιήσει την εναλλακτική γραμματοσειρά για να εμφανίσει το κείμενο έως ότου ολοκληρωθεί η λήψη της προσαρμοσμένης γραμματοσειράς. Αυτό είναι επίσης γνωστό ως "λάμψη του ασταθούς κειμένου" ή FOUT.
• fallback: Λειτουργεί ως συμβιβασμός μεταξύ των τιμών autoκαι swapΤο πρόγραμμα περιήγησης θα αποκρύψει το κείμενο για περίπου 100ms και, εάν η γραμματοσειρά δεν έχει ληφθεί ακόμη, θα χρησιμοποιήσει το εναλλακτικό κείμενο. Θα αλλάξει στη νέα γραμματοσειρά μετά τη λήψη της, αλλά μόνο κατά τη διάρκεια μιας σύντομης περιόδου ανταλλαγής (πιθανώς 3 δευτερολέπτων).
• optional: Όπως fallback, αυτή η τιμή λέει στο πρόγραμμα περιήγησης να αποκρύψει αρχικά το κείμενο και μετά να μεταβεί σε εναλλακτική γραμματοσειρά έως ότου η προσαρμοσμένη γραμματοσειρά είναι διαθέσιμη για χρήση. Ωστόσο, αυτή η τιμή επιτρέπει επίσης στο πρόγραμμα περιήγησης να προσδιορίσει εάν η προσαρμοσμένη γραμματοσειρά χρησιμοποιείται ακόμη και καθόλου, χρησιμοποιώντας την ταχύτητα σύνδεσης του χρήστη ως καθοριστικό παράγοντα όπου οι πιο αργές συνδέσεις είναι λιγότερο πιθανό να λάβουν την προσαρμοσμένη γραμματοσειρά.

Εδώ είναι ένας άλλος τρόπος να τα σκεφτείτε

	Περίοδος αποκλεισμού	Περίοδος ανταλλαγής
ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ	Μικρός	Απειρος
ανταλαγή	Κανένας	Απειρος
εφεδρική	Εξαιρετικά σύντομο	Μικρός
προαιρετικός	Εξαιρετικά σύντομο	Κανένας

Γιατί χρειαζόμαστε font-display

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

Στη συνέχεια ήρθε ο @font-faceκανόνας που έδωσε στους σχεδιαστές ιστοσελίδων και στους προγραμματιστές front-end νέες τυπογραφικές δυνάμεις σε αντίθεση με ποτέ. Μας επέτρεψε να ανεβάσουμε αρχεία γραμματοσειρών σε έναν διακομιστή και να γράψουμε ένα σύνολο κανόνων στα φύλλα στυλ που ονομάζουν τη γραμματοσειρά και να ενημερώνουν το πρόγραμμα περιήγησης από πού να κατεβάσουν τα αρχεία. Προκάλεσε επίσης υπηρεσίες όπως το Google Fonts που έφεραν προσαρμοσμένες γραμματοσειρές στις μάζες. Τέλος, ένα μεγάλο εμπόδιο που διαχώρισε το σχεδιασμό ιστοσελίδων από το σχέδιο εκτύπωσης είχε ανατραπεί!

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

Μια άλλη ιδιαίτερη ανησυχία που προέκυψε με προσαρμοσμένες γραμματοσειρές είναι αυτό που ονομάστηκε "flash του ασταθούς κειμένου" ή FOUT για συντομία. Τα προγράμματα περιήγησης από προεπιλογή θα εμφανίζουν μια γραμματοσειρά συστήματος ενώ περιμένουν τη λήψη της προσαρμοσμένης γραμματοσειράς. Αυτό επέτρεψε στις ιστοσελίδες να φορτώνουν γρηγορότερα, αλλά εγείρουν ανησυχίες μεταξύ των σχεδιαστών ιστοσελίδων που το θεώρησαν ως παραβίαση της εμπειρίας του χρήστη και παραποίηση της προβλεπόμενης σχεδίασης. Τα προγράμματα περιήγησης ιστού σήμερα αποκρύπτουν γενικά το κείμενο έως ότου γίνει λήψη της προσαρμοσμένης γραμματοσειράς, το οποίο τώρα ονομάζουμε «φλας αόρατου κειμένου» ή FOIT.

Ούτε το FOUT ούτε το FOIT είναι υπέροχο. Διαθέτουμε τρόπους βελτιστοποίησης της απόδοσης των προσαρμοσμένων γραμματοσειρών για να διευκολύνουμε τα εφέ. Ωστόσο, τώρα πρέπει font-displayνα πούμε στο πρόγραμμα περιήγησης αν προτιμούμε FOUT, FOIT ή ακόμα και κάτι ενδιάμεσο.

Δοκιμή για υποστήριξη

Ενδιαφέρουσα προειδοποίηση που σημείωσε ο Šime Vidas:

Η εμφάνιση γραμματοσειράς CSS είναι @font-faceπεριγραφή και όχι ιδιότητα, επομένως η υποστήριξή της στο πρόγραμμα περιήγησης δεν μπορεί να ελεγχθεί με ερωτήματα λειτουργιών ( @supportsκανόνας CSS και API υποστήριξης CSS ).

Περισσότερες πληροφορίες

• CSS Font Rendering Controls Module Level 1 Προδιαγραφή: Ένα προσχέδιο των προδιαγραφών για το ακίνητο.
• font-display για τις μάζες: Ο Jeremy Wagner μας παρουσίασε στην ιδιοκτησία εδώ στο CSS-Tricks.
• Χρήση @font-face: Μια ολοκληρωμένη εξήγηση του κανόνα και των βέλτιστων πρακτικών για τον τρόπο χρήσης του.
• Σύστημα στοίβας γραμματοσειρών: Ένα απόσπασμα για την πλήρη εξαίρεση προσαρμοσμένων γραμματοσειρών και βασίζεται αποκλειστικά στις γραμματοσειρές συστήματος ενός χρήστη.
• Έλεγχος της απόδοσης γραμματοσειράς με font-display: Μια ωραία διατύπωση σχετικά με το θέμα από την Google.

Υποστήριξη προγράμματος περιήγησης

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

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
60	58	Οχι	79	11.1

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	11.3-11.4