Η font-optical-sizingιδιότητα CSS επιτρέπει στο πρόγραμμα περιήγησης να προσαρμόζει το περίγραμμα των γλύφων γραμματοσειράς για να τα κάνει πιο ευανάγνωστα σε διαφορετικά μεγέθη. Για παράδειγμα, το μικρότερο κείμενο μπορεί να έχει πιο παχύ περίγραμμα για να αυξήσει την αντίθεσή του. Από την άλλη πλευρά, το μεγαλύτερο κείμενο μπορεί να έχει κάτι πιο «ευαίσθητο» για να αναφέρει τις προδιαγραφές.
.element ( font-optical-sizing: none; )Οι Γλύφοι έχουν περιγράμματα;
Το κάνουν! Στην πραγματικότητα, όλοι οι γλύφοι τους έχουν και κλιμακώνονται με το μέγεθος της γραμματοσειράς. Το πρόβλημα είναι ότι ένα εξαιρετικά λεπτό περίγραμμα σε μικρό μέγεθος γραμματοσειράς ενδέχεται να μην παρέχει αρκετή αντίθεση για την καλύτερη αναγνωσιμότητα. Ομοίως, τα παχύτερα περιγράμματα σε μεγαλύτερα μεγέθη μπορεί να έχουν πάρα πολύ βάρος και αντίθεση. font-optical-sizingπροσπαθεί να το διορθώσει επιτρέποντας στο πρόγραμμα περιήγησης να παίζει με το περίγραμμα, ώστε να διαβάζεται καλύτερα σε διαφορετικές κλίμακες. Το αποτέλεσμα θα είναι πιο ευκρινές κείμενο και στενότερα ή ευρύτερα μήκη κειμένου ανάλογα με το μέγεθος της γραμματοσειράς.
Αυτό λειτουργεί μόνο σε γραμματοσειρές που υποστηρίζουν οπτικό μέγεθος
Και οι γραμματοσειρές που υποστηρίζουν οπτικό μέγεθος είναι μεταβλητές γραμματοσειρές , συμπεριλαμβανομένου του Roboto Delta, μιας μεταβλητής έκδοσης του κλασικού Roboto της Google. Μια άλλη υποστηρικτική γραμματοσειρά είναι το Amstelvar. Και οι δύο γραμματοσειρές διατηρούνται από το Type Network.
Ακόμα κι αν μια γραμματοσειρά είναι μεταβλητή, πρέπει να υποστηρίζει ρητά το οπτικό μέγεθος ως χαρακτηριστικό.
Ένας άλλος τρόπος για οπτικά μέγεθος γραμματοσειρών
Η font-optical-sizingιδιότητα είναι ο αποτελεσματικότερος τρόπος οπτικής διαμόρφωσης μιας γραμματοσειράς που την υποστηρίζει. Ένας άλλος τρόπος είναι να χρησιμοποιήσετε την font-variation-settingsιδιότητα, η οποία σας επιτρέπει να ελέγχετε το οπτικό μέγεθος με το opszοποίο είναι η λέξη-κλειδί για οπτικό μέγεθος σε μεταβλητές γραμματοσειρές που την υποστηρίζουν.
Λάβετε υπόψη ότι η χρήση font-variation-settingsαπαιτεί να ρυθμίσετε το opszσύμφωνα με το μέγεθος της γραμματοσειράς, ώστε όλα να κλιμακώνονται σωστά.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Σύνταξη
font-optical-sizing: auto | none;- Αρχικός:
auto - Ισχύει για: όλα τα στοιχεία
- Κληρονομικό: ναι
- Υπολογισμένη τιμή: καθορισμένη λέξη-κλειδί
- Τύπος κινούμενης εικόνας: διακριτός
Αξίες
auto: Αυτή είναι η προεπιλεγμένη τιμή. Επιτρέπει στα προγράμματα περιήγησης να βελτιστοποιούν κείμενο σε διαφορετικά μεγέθη γραμματοσειρών για ευκρίνεια.none: Αυτό αποτρέπει τα προγράμματα περιήγησης από την τροποποίηση κειμένου.
Το ξενοδοχείο δέχεται επίσης παγκόσμιες αξίες λέξη-κλειδί, συμπεριλαμβανομένων inherit, initialκαι unset.
Διαδήλωση
Υποστήριξη προγράμματος περιήγησης
| ΙΕ | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
|---|---|---|---|---|---|
| Οχι | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Πρόγραμμα περιήγησης Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Ολα |
Περαιτέρω ανάγνωση
- CSS Fonts Module Level 4 (Πρόχειρο συντάκτη)
- Τεκμηρίωση MDN
- Μεταβλητές γραμματοσειρές: Οπτικό μέγεθος, προσαρμοσμένοι άξονες και άλλες περιέργειες (Responsive Web Typography)