Η font-variant-numericιδιότητα στο CSS υποστηρίζει τη μορφή γραμματοσειράς OpenType καθορίζοντας ποια αριθμητικά γλύφες θα χρησιμοποιηθούν σε μια τάξη, συμπεριλαμβανομένων παραλλαγών για κλάσματα, μαρκαδόρους και παραλλαγές στυλ.
Ένα μικρό πλαίσιο
Τείνουμε να θεωρούμε τους αριθμούς ως στατικό γλύφο. Εκτυπώνει και έτσι είναι. Ωστόσο, οι αριθμοί μοιάζουν πολύ με τα γράμματα του αλφαβήτου, με την έννοια ότι μπορούν να έχουν παραλλαγές που, ανάλογα με το περιβάλλον, αξίζουν την τροποποίηση του στυλ. Μιλάμε για πράγματα όπως κλάσματα (π.χ. 1/4), κανονικά (π.χ. 1ο) και ακόμη και το αντίστοιχο των κεφαλαίων και πεζών αριθμών. Ωστόσο, σε αντίθεση με τα γράμματα, αυτές οι παραλλαγές δεν αλλάζουν την έννοια του περιεχομένου, αν και προσδίδουν πρόσθετο πλαίσιο ή έχουν αντίκτυπο στην αναγνωσιμότητα.
Το τρίψιμο με αυτήν την ιδιότητα είναι ότι έχει σχεδιαστεί για να λειτουργεί με γραμματοσειρές με δυνατότητα OpenType, μια νέα αλλά γρήγορα αναπτυσσόμενη μορφή γραμματοσειράς που παρέχει ένα πιο εκτεταμένο σύνολο γλύφων που μπορούν να στοχευτούν για χρήση σε διαφορετικά περιβάλλοντα. Μπορεί να ακούτε συχνά το OpenType που αναφέρεται ως μεταβλητές γραμματοσειρές και αυτό συμβαίνει επειδή περιέχουν μια μεγαλύτερη ποικιλία χαρακτήρων που τους καθιστούν πιο ευέλικτους για μια ποικιλία χρήσεων. Παραλλαγές για όλα τα πράγματα!
Το πρόβλημα είναι ότι η διαθεσιμότητα γραμματοσειρών που μπορούν να επωφεληθούν πλήρως font-variantκαι font-variant-numericείναι περιορισμένες. Υπάρχει ένας αυξανόμενος αριθμός γραμματοσειρών συμβατών με OpenType, αλλά υπάρχει ένα πολύ μικρότερο υποσύνολο επιλογών που χρησιμοποιούν όλες τις δυνατότητες που font-variant-numericπροσφέρουν και αυτές είναι συχνά premium και ακριβές. Ο Richard Butler το συνοψίζει όμορφα:
Έχουμε στη διάθεσή μας «κεφαλαία» αριθμούς που ονομάζονται αριθμοί επένδυσης ή τιτλοδότησης, και «πεζά» αριθμούς που ονομάζονται παλαιού τύπου ή αριθμοί κειμένου.… Είναι επίσης η περίπτωση ότι η συντριπτική πλειονότητα των γραμματοσειρών δεν είναι ούτε σύγχρονη ούτε επαγγελματική, εάν τα σύγχρονα σημαίνει OpenType- ενεργοποιημένα και επαγγελματικά μέσα σχεδιασμένα και με τα δύο σύνολα αριθμών.
Το μεγαλύτερο πρόβλημα που συνήθως μας απασχολεί όταν πρόκειται για ιδιότητες CSS είναι η υποστήριξη του προγράμματος περιήγησης, αλλά αυτή η ιδιότητα και όλα τα άλλα που σχετίζονται font-variantείναι επίσης στο έλεος των σχεδιαστών γραμματοσειρών για να φέρουν πλήρη υποστήριξη στο τραπέζι.
Αυτό είναι πολύ καλό, αλλά αρχίζουμε να βλέπουμε να εμφανίζονται πιο «μοντέρνες» και «επαγγελματικές» γραμματοσειρές, ακόμη και κατά τη στιγμή αυτής της γραφής. Το Adobe TypeKit ανακοίνωσε ότι δουλεύει για την υποστήριξη λειτουργιών OpenType και φημολογείται ότι το Google Fonts είναι επίσης διαθέσιμο τώρα καθώς το Chrome 62 τα υποστηρίζει.
Βασική χρήση
Αυτή είναι η πιο βασική χρήση του ακινήτου:
.fraction ( font-variant-numeric: diagonal-fractions; )Τα παλαιότερα προγράμματα περιήγησης δεν θα το αναγνωρίσουν, αλλά αποδέχονται font-feature-settingsπου ξεκλειδώνουν τις ίδιες δυνατότητες με διαφορετικές τιμές. Μπορούμε να συνδυάσουμε τις δύο ιδιότητες για βαθύτερη υποστήριξη:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Εναλλακτικά, μπορούμε να το προσαρμόσουμε για να εισπνεύσουμε την υποστήριξη του προγράμματος περιήγησης χρησιμοποιώντας @supportsέτσι ώστε η νέα ιδιότητα να εξυπηρετείται μόνο σε προγράμματα περιήγησης υποστήριξης
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Αξίες
Η font-variant-numericιδιότητα δέχεται τις ακόλουθες τιμές. Η αντίστοιχη font-feature-settingsτιμή σημειώνεται για αναφορά.
Γενικές αξίες
| αξία | Περιγραφή | Ρύθμιση χαρακτηριστικών |
|---|---|---|
normal | Καμία από τις δυνατότητες που αναφέρονται παρακάτω δεν είναι ενεργοποιημένη. | ΟΧΙ |
ordinal | Εφαρμόζει γράμματα για την αναπαράσταση αριθμητικής σειράς, συνήθως με τη μορφή υπεργράφου. | ordn |
slashed-zero | Εμφανίζει μια εναλλακτική μορφή μηδέν με μια διαγώνια γραμμή που διατρέχει αυτήν. | zero |
Αριθμητικές τιμές αριθμών
| αξία | Περιγραφή | Ρύθμιση χαρακτηριστικών |
|---|---|---|
lining-nums | Γραμμές αριθμοί προς τα πάνω με κάθετα έτσι ώστε να ακολουθούν το ίδιο ύψος ευθυγραμμίζονται στο ίδιο επίπεδο. | lnum |
oldstyle-nums | Επιτρέπει μια εναλλακτική κατακόρυφη ευθυγράμμιση όπου οι αριθμοί δεν εμφανίζονται πάντα ομοιόμορφα στην ίδια γραμμή βάσης. | onum |
Αριθμητικές τιμές κλάσματος
| αξία | Περιγραφή | Ρύθμιση χαρακτηριστικών |
|---|---|---|
diagonal-fractions | Εμφανίζει τα κλάσματα σε μικρότερη μορφή όπου ο αριθμητής (άνω αριθμός) και ο παρονομαστής (κάτω αριθμός) διαιρούνται με μια διαγώνια κάθετο. | frac |
stacked-fractions | Εμφανίζει κλάσματα σε μικρότερη μορφή όπου ο αριθμητής και ο παρονομαστής στοιβάζονται το ένα πάνω από το άλλο και διαιρούνται με οριζόντια γραμμή. | afrc |
Αριθμητικές τιμές απόστασης
| αξία | Περιγραφή | Ρύθμιση χαρακτηριστικών |
|---|---|---|
proportional-nums | Επιτρέπει στους αριθμούς να καταλαμβάνουν το δικό τους χώρο που δεν είναι απαραίτητα ίσο σε πλάτος με άλλους αριθμούς. | pnum |
tabular-nums | Εμφανίζει αριθμούς με ίσο μέγεθος, αναλογικό και κενό για καθαρή μορφοποίηση σε περιβάλλοντα δεδομένων πίνακα. | tnum |
Η προδιαγραφή περιλαμβάνει μια ειδική σημείωση σχετικά με τη χρήση, ordinalεπειδή μοιάζει με το supστοιχείο υπεργράφου , αλλά επισημαίνεται διαφορετικά.
Για υπεργράφους:
sup ( font-variant-position: super; )Two squared is 22Για τακτικούς δείκτες:
.ordinal ( font-variant-numeric: ordinal; )1stΥποστήριξη προγράμματος περιήγησης
Η font-variant-numericιδιοκτησία αυτή τη στιγμή αποτελεί μέρος της προδιαγραφής επιπέδου 3 της ενότητας CSS Fonts, η οποία βρίσκεται στην κατάσταση υποβολής υποψηφίων κατά τη στιγμή αυτής της γραφής, πράγμα που σημαίνει ότι μπορεί να αλλάξει ανά πάσα στιγμή.
Επιφάνεια εργασίας
| Χρώμιο | Ακρη | Firefox | ΙΕ | ΛΥΡΙΚΗ ΣΚΗΝΗ | Σαφάρι |
|---|---|---|---|---|---|
| 52 | Οχι | 34 | Οχι | 39 | 9.1 |
Ο Firefox 24-34 (αποκλειστικό) υποστηρίζει την ιδιότητα πίσω από την layout.css.font-features.enabledπροτίμηση όταν έχει οριστεί σε true.
Κινητό
| Πρόγραμμα περιήγησης Android | Chrome Android | Ακρη | Firefox | ΙΕ | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Οχι | 34 | Οχι | 39 | Ναί |