Χρήση του @ font-face - CSS-Κόλπα

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

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

Βαθιά δυνατή υποστήριξη προγράμματος περιήγησης

Αυτή είναι η μέθοδος με τη βαθύτερη δυνατή υποστήριξη αυτή τη στιγμή. Ο @font-faceκανόνας πρέπει να προστεθεί στο φύλλο στυλ πριν από οποιοδήποτε στυλ.

@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )

Στη συνέχεια, χρησιμοποιήστε το για να σχεδιάσετε στοιχεία όπως αυτό:

body ( font-family: 'MyWebFont', Fallback, sans-serif; )

Πρακτικό επίπεδο υποστήριξης προγράμματος περιήγησης

Τα πράγματα μετατοπίζονται σε μεγάλο βαθμό προς τα WOFF και WOFF 2, έτσι μπορούμε πιθανώς να ξεφύγουμε με:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
5+	5.1+	3.6+	11.50+	9+	4.4+	5.1+

Υποστήριξη ελαφρώς βαθύτερου προγράμματος περιήγησης

Εάν χρειάζεστε ένα είδος ευτυχισμένου μέσου μεταξύ πλήρους υποστήριξης και πρακτικής υποστήριξης, αυτό θα καλύψει μερικές ακόμη βάσεις:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
3.5+	3+	3.5+	10.1+	9+	2.2+	4.3+

Υποστήριξη Super Progressive Browser

Εάν στοιχηματίζουμε το WOFF, τότε μπορούμε να περιμένουμε τα πράγματα να στραφούν προς το WOFF2 κάποια στιγμή. Αυτό σημαίνει ότι μπορούμε να ζήσουμε στην αιμορραγία με:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
36+	Οχι	35+ με σημαία	23+	Οχι	37	Οχι

Εναλλακτικές τεχνικές

@import

Ενώ @font-faceείναι εξαιρετικό για γραμματοσειρές που φιλοξενούνται στους δικούς μας διακομιστές, ενδέχεται να υπάρχουν καταστάσεις όπου η φιλοξενούμενη λύση γραμματοσειράς είναι καλύτερη. Οι Γραμματοσειρές Google το προσφέρουν ως τρόπο χρήσης των γραμματοσειρών τους. Το παρακάτω είναι ένα παράδειγμα χρήσης @importγια τη φόρτωση της γραμματοσειράς Open Sans από το Google Fonts:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Τότε μπορούμε να το χρησιμοποιήσουμε για το στυλ στοιχείων:

body ( font-family: 'Open Sans', sans-serif; )

Εάν ανοίξετε τη διεύθυνση URL για τη γραμματοσειρά, μπορείτε πραγματικά να δείτε όλη την @font-faceεργασία που γίνεται πίσω από τα παρασκήνια.

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

Δείτε το Pen Using @import για προσαρμοσμένες γραμματοσειρές από CSS-Tricks (@ css-tricks) στο CodePen.

ένα φύλλο στυλ

Παρομοίως, θα μπορούσατε να συνδέσετε το ίδιο στοιχείο με οποιοδήποτε άλλο αρχείο CSS, στο έγγραφο HTML και όχι στο CSS. Χρησιμοποιώντας το ίδιο παράδειγμα από τις Γραμματοσειρές Google, αυτό θα χρησιμοποιούσαμε:

Στη συνέχεια, μπορούμε να σχεδιάσουμε τα στοιχεία μας όπως οι άλλες μέθοδοι:

body ( font-family: 'Open Sans', sans-serif; )

Και πάλι, αυτό εισάγει τους @font-faceκανόνες, αλλά αντί να τους εισάγει στο φύλλο στυλ μας, προστίθενται στο HTML μας .

Δείτε το Pen Using για προσαρμοσμένες γραμματοσειρές από CSS-Tricks (@ css-tricks) στο CodePen.

Πρόκειται για το ίδιο πράγμα… και οι δύο τεχνικές κατεβάζουν τα απαιτούμενα στοιχεία.

Κατανόηση των τύπων αρχείων γραμματοσειράς

Το αρχικό απόσπασμα στην κορυφή αυτής της ανάρτησης αναφέρεται σε πολλά αρχεία με παράξενες επεκτάσεις. Ας εξετάσουμε το καθένα και να κατανοήσουμε καλύτερα τι εννοούν.

WOFF / WOFF2

Περιέχει: Μορφή γραμματοσειράς Open Web.

Δημιουργήθηκε για χρήση στον ιστό και αναπτύχθηκε από τη Mozilla σε συνεργασία με άλλους οργανισμούς, οι γραμματοσειρές WOFF φορτώνουν συχνά γρηγορότερα από άλλες μορφές, επειδή χρησιμοποιούν μια συμπιεσμένη έκδοση της δομής που χρησιμοποιείται από τις γραμματοσειρές OpenType (OTF) και TrueType (TTF). Αυτή η μορφή μπορεί επίσης να περιλαμβάνει μεταδεδομένα και πληροφορίες άδειας στο αρχείο γραμματοσειρών. Αυτή η μορφή φαίνεται να είναι ο νικητής και να κατευθύνονται όλα τα προγράμματα περιήγησης.

Το WOFF2 είναι η επόμενη γενιά WOFF και διαθέτει καλύτερη συμπίεση από την αρχική.

SVG / SVGZ

Περιλαμβάνει: Επεκτάσιμα διανυσματικά γραφικά (γραμματοσειρά)

Το SVG είναι μια επαναδημιουργία φορέα της γραμματοσειράς, η οποία την καθιστά πολύ ελαφρύτερη στο μέγεθος του αρχείου και την καθιστά επίσης ιδανική για χρήση σε κινητά. Αυτή η μορφή είναι η μόνη που επιτρέπεται από την έκδοση 4.1 και κάτω του Safari για iOS. Οι γραμματοσειρές SVG δεν υποστηρίζονται προς το παρόν από τους Firefox, IE ή IE Mobile. Ο Firefox έχει αναβάλει την εφαρμογή επ 'αόριστον για να επικεντρωθεί στο WOFF.

Το SVGZ είναι η έκδοση με φερμουάρ του SVG.

ΕΟΤ

Περιλαμβάνει: Ενσωματωμένο ανοιχτό τύπο

Αυτή η μορφή δημιουργήθηκε από τη Microsoft (οι αρχικοί καινοτόμοι του @font-face) και είναι ένα ιδιόκτητο πρότυπο αρχείων που υποστηρίζεται μόνο από την IE. Στην πραγματικότητα, είναι η μόνη μορφή που θα αναγνωρίζει ο IE8 και παρακάτω κατά τη χρήση @font-face.

OTF / TTF

Σημαίνει: Γραμματοσειρά OpenType και Γραμματοσειρά TrueType.

Η μορφή WOFF δημιουργήθηκε αρχικά ως αντίδραση στα OTF και TTF, εν μέρει, επειδή αυτές οι μορφές μπορούσαν εύκολα (και παράνομα) να αντιγραφούν, Ωστόσο, το OpenType έχει δυνατότητες που μπορεί να ενδιαφέρονται πολλοί σχεδιαστές (συνδέσεις και παρόμοια).

Μια σημείωση για την απόδοση

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

Ένα συνηθισμένο σύμπτωμα ήταν μια σύντομη στιγμή όπου οι γραμματοσειρές φορτώνονται πρώτα ως εναλλακτικό, και στη συνέχεια αναβοσβήνουν στη ληφθείσα γραμματοσειρά. Ο Paul Irish έχει μια παλαιότερη ανάρτηση σε αυτό (ονομάζεται "FOUT": Flash Of Unstyled Text).

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

• Καλύτερα @ font-face με εκδηλώσεις φόρτωσης γραμματοσειράς
• Πώς χρησιμοποιούμε υπεύθυνα τις γραμματοσειρές Ιστού ή, αποφεύγοντας ένα @ font-face-palm
• Flash του Faux Text-ακόμα περισσότερο στη Φόρτωση γραμματοσειράς

Ακολουθούν μερικές ακόμη σκέψεις κατά την εφαρμογή προσαρμοσμένων γραμματοσειρών:

Παρακολουθήστε το μέγεθος του αρχείου

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

Περιορίστε το σύνολο χαρακτήρων, εάν είναι δυνατόν

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

Εξετάστε τις γραμματοσειρές συστήματος για μικρές οθόνες

Πολλές συσκευές έχουν κολλήσει σε δυσάρεστες συνδέσεις. Ένα τέχνασμα μπορεί να είναι να στοχεύσετε μεγαλύτερες οθόνες κατά τη φόρτωση της προσαρμοσμένης γραμματοσειράς χρησιμοποιώντας @media.

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

@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )

Υπηρεσίες γραμματοσειρών

Υπάρχουν αρκετές υπηρεσίες που θα φιλοξενήσουν γραμματοσειρές και θα παρέχουν πρόσβαση σε γραμματοσειρές με άδεια χρήσης. Τα οφέλη από τη χρήση μιας υπηρεσίας συχνά απορρέουν από την αποτελεσματική παράδοση μιας μεγάλης επιλογής νόμιμων γραμματοσειρών (π.χ. την εξυπηρέτησή τους σε ένα γρήγορο CDN).

Ακολουθούν μερικές φιλοξενούμενες υπηρεσίες γραμματοσειρών:

• Τυπογραφία Cloud
• Typekit
• Γραμματοσειρά
• Τύπος ιστού
• Γραμματοσειρά
• Τυποθετική
• Fonts.com
• Γραμματοσειρές Google
• Γραμματοσειρά σκίουρος

Τι γίνεται με τις γραμματοσειρές εικονιδίων;

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

Περισσότεροι πόροι

• Βασικά στοιχεία του Google Font API
• Οικογένειες γραμματοσειρών CSS