Η unicode-rangeιδιότητα στο CSS χρησιμοποιείται από το @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 */ unicode-range: U+00-FF; /* Define the available characters */ )Με άλλα λόγια, @font-faceθα αναφέρεται στην ιδιότητα και θα καθορίσει εάν πρέπει ή όχι να πραγματοποιήσει λήψη και χρήση της γραμματοσειράς με βάση το αν οι χαρακτήρες ή το εύρος των χαρακτήρων ταιριάζουν με αυτούς στο έγγραφο HTML.
Πρόσωπο γραμματοσειράς: Γεια σας HTML, ταιριάζει κάποιος από τους παρακάτω χαρακτήρες με αυτό που υπάρχει στη σελίδα;
HTML: Ναι, πολλά.
Font-Face: Τέλεια, εδώ είναι ένα αρχείο γραμματοσειράς που πρέπει να κατεβάσετε για να εμφανίσετε αυτούς τους χαρακτήρες.
Η σημαντική σημασιολογική διάκριση που πρέπει να αναφερθούμε εδώ είναι ότι unicode-rangeκαθορίζει για ποιους χαρακτήρες μπορεί να χρησιμοποιηθεί μια γραμματοσειρά και όχι για ποιους χαρακτήρες υπάρχει μια γραμματοσειρά. Με άλλα λόγια, αν δηλώνουμε μια unicode-rangeσχετικά @font-faceκαι οι χαρακτήρες που έχουν φορτωθεί σε ένα παιχνίδι έγγραφο HTML που φάσμα, τότε η γραμματοσειρά θα κατεβάσετε και να τεθεί σε χρήση.
Μπορείτε να φανταστείτε τα οφέλη απόδοσης που ανοίγουν με αυτήν την ιδιότητα. Για παράδειγμα, μπορούμε να φορτώσουμε μια προσαρμοσμένη γραμματοσειρά μόνο εάν φιλοξενεί συγκεκριμένους χαρακτήρες και όχι πάντα να φορτώνει τη γραμματοσειρά σε όλες τις περιπτώσεις.
Υπάρχει ακόμη ένας τρόπος να συνδυάσετε δύο @font-faceσετ στην ίδια font-faceδήλωση ιδιοκτησίας, χάρη σε ένα εύχρηστο τέχνασμα που μοιράστηκε ο Jake Archibald. Η ιδέα είναι ότι ένα @font-faceσύνολο παρακάμπτει το άλλο με βάση την αντιστοιχισμένη unicode-range, βελτιστοποιημένη απόδοση ή απλώς βελτιώνοντας την τυπογραφία σε μια σελίδα.
Αξίες
Οποιοσδήποτε κωδικός ή εύρος χαρακτήρων unicode είναι αποδεκτή unicode-rangeτιμή. Θα παρατηρήσετε ότι προηγούνται σημεία unicode U+ακολουθούμενο από έως και έξι χαρακτήρες που αποτελούν τον κώδικα χαρακτήρων. Τα σημεία ή τα εύρη που δεν ακολουθούν αυτήν τη μορφή θεωρούνται άκυρα και θα κάνουν την ιδιότητα να αγνοηθεί.
- Ενιαίος χαρακτήρας (π.χ.
U+26) - Εύρος χαρακτήρων (π.χ.
U+0025-00FF) - Εύρος μπαλαντέρ (π.χ.
U+4??)
Η σειρά Wildcard είναι η δύσκολη. Καθένα ?αντιπροσωπεύει ένα μπαλαντέρ όπου οποιαδήποτε τιμή θα ταιριάζει. Θα νομίζατε ότι σημαίνει ότι μπορείτε να μπαίνετε μπαλαντέρ σε όλο το θέμα με κάτι τέτοιο:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Ωστόσο, αυτό δεν θα λειτουργήσει. Ο λόγος είναι ότι η αρχή με ?υπονοεί έναν κωδικό χαρακτήρα που οδηγεί με 0, πράγμα που σημαίνει ότι μπορούν να χρησιμοποιηθούν έως και πέντε χαρακτήρες ερωτηματικών παρά το γεγονός ότι τα unicodes δέχονται έως και έξι συνολικούς χαρακτήρες.
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )Υπάρχουν πολλές επιλογές unicode εκεί έξω. Το Basic Latin ( 0020-007F) είναι πιθανώς το πιο κοινό εύρος για αγγλικούς ιστότοπους, αλλά το unicode-table.com παρέχει μια ολοκληρωμένη λίστα όλων των διαθέσιμων περιοχών με κωδικούς για συγκεκριμένους χαρακτήρες.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Περαιτέρω ανάγνωση
- CSS Fonts Module Επίπεδο 3 Προδιαγραφή
- Πίνακας Unicode: Ένας πόρος για την αναφορά συνόλων και κωδικών χαρακτήρων unicode.
- Χρησιμοποιώντας @ font-face: CSS-Tricks post που καλύπτει τον τρόπο
@font-faceλειτουργίας με διαφορετικές τεχνικές και παραδείγματα εργασίας. - Ποια είναι η συμφωνία με τη δήλωση ιδιοτήτων γραμματοσειράς στο @ font-face;: Δημοσίευση CSS-Tricks που σχετίζεται με το πώς μπορούν να χρησιμοποιηθούν αντίστοιχες τιμές στις ιδιότητες γραμματοσειράς για να προσδιοριστεί εάν μια προσαρμοσμένη γραμματοσειρά μεταφορτώνεται και χρησιμοποιείται από το πρόγραμμα περιήγησης.