Ώρα για ένα άλλο ζεύγος screencast! Αυτή τη φορά έχω ενεργοποιήσει τον Zach Leatherman, από το Filament Group. Ο Zach έχει κάνει πολλές έρευνες, γράφει και μιλάει για φόρτωση γραμματοσειρών Ιστού τα τελευταία χρόνια. Έχει έναν ολοκληρωμένο οδηγό για αυτό!
Υπάρχουν ορισμένα προβλήματα με τον προεπιλεγμένο τρόπο φόρτωσης των προσαρμοσμένων γραμματοσειρών. Όπως και στο εξής, απλώς συνδέοντας μια γραμματοσειρά σε κάποιο CSS μέσω @ font-face. Ακόμα και ο τρόπος με τον οποίο σας παρέχει το Google Fonts για να χρησιμοποιήσετε τις γραμματοσειρές τους, το Zach καλεί ένα anti-pattern (τελικά είναι απλώς βανίλια @ font-face). Διαφορετικά προγράμματα περιήγησης κάνουν διαφορετικά πράγματα με το @ font-face. Για παράδειγμα, ορισμένες εκδόσεις του Safari ορίζουν τον τύπο σε μια προσαρμοσμένη γραμματοσειρά αόρατη έως ότου φορτωθεί η γραμματοσειρά, αλλά δεν έχει χρονικό όριο, οπότε αν η γραμματοσειρά αποτύχει για οποιονδήποτε λόγο, θα μπορούσατε να είστε στο απόλυτο χειρότερο σενάριο: για πάντα αόρατο κείμενο η ιστοσελίδα.
Δεν έχετε αρκετό έλεγχο σχετικά με τον τρόπο φόρτωσης των γραμματοσειρών @ font-face, εκτός εάν λάβετε τα πράγματα στα χέρια σας. Αυτό σημαίνει πράγματα όπως: ευθυγράμμιση της γραμματοσειράς, υποκατάσταση της γραμματοσειράς (είτε με ένα "κρίσιμο" σύνολο γλύφων, ή τουλάχιστον μείωση των γλύφων στη γλώσσα που χρησιμοποιείται), χρήση φορτωτών γραμματοσειρών για να προσδιορίσετε πότε φορτώνουν οι γραμματοσειρές και να αλλάζουν τάξεις για να τις χρησιμοποιήσετε . Αυτό το τελευταίο είναι ιδιαίτερα ενδιαφέρον. Όταν ασκείτε έλεγχο στη φόρτωση γραμματοσειρών, όχι μόνο πρέπει να ασχοληθείτε με το πότε / πώς φορτώνει το πρόγραμμα περιήγησης το CSS που περιέχει το @ font-face, αλλά και πότε / πώς το πρόγραμμα περιήγησης συναντά στοιχεία κειμένου που τους λένε να χρησιμοποιούν αυτές τις γραμματοσειρές. Δεν γίνεται λήψη γραμματοσειρών που δεν χρησιμοποιούνται. Ορισμένες φορές, λοιπόν, η διαδικασία είναι να τους αναγκάσετε να πραγματοποιήσουν λήψη, περιμένετε να πραγματοποιήσουν λήψη και, στη συνέχεια, εφαρμόστε τάξεις για να τις χρησιμοποιήσετε πραγματικά.
Μερικά εργαλεία που εξετάσαμε:
- Το Firefox DevTools ήταν καλύτερο για την εξέταση γραμματοσειρών σε χρήση
- Η ρύθμιση των γραμματοσειρών μπορεί να γίνει στη γεννήτρια Font Squirrel ή στο Font Prep.
- Τι γλύφο υποσυνδέεστε; Δοκιμάστε τι χρειάζεστε σε συγκεκριμένες διευθύνσεις URL με το Glyphhanger.
- Πώς μπορείτε να πείτε πότε το πρόγραμμα περιήγησης χρησιμοποιεί έντονη γραφή / πλάγια γραφή; faux-pas.