Η text-renderingιδιότητα στο CSS σάς επιτρέπει να επιλέξετε ποιότητα κειμένου σε σχέση με την ταχύτητα (ή το αντίστροφο), επιτρέποντάς σας να βελτιστοποιήσετε τη βελτιστοποίηση προτείνοντας στο πρόγραμμα περιήγησης πώς θα έπρεπε να αποδίδει κείμενο στην οθόνη. Είπε έναν άλλο τρόπο στο MDN:
Η
text-renderingιδιότητα CSS παρέχει πληροφορίες στη μηχανή απόδοσης σχετικά με το τι πρέπει να βελτιστοποιηθεί κατά την απόδοση κειμένου. Το πρόγραμμα περιήγησης κάνει ανταλλαγές μεταξύ ταχύτητας, ευκρίνειας και γεωμετρικής ακρίβειας.
Μπορείτε να δείτε μερικά παραδείγματα πριν / μετά εδώ. Μερικές φορές το αποτέλεσμα είναι απλώς καλύτερο kerning:
Ορισμένα αρχεία γραμματοσειρών περιέχουν πρόσθετες πληροφορίες σχετικά με τον τρόπο απόδοσης της γραμματοσειράς. optimizeLegibilityκάνει χρήση αυτών των πληροφοριών και optimizeSpeedδεν το κάνει.
Παράδειγμα
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Εκτέλεση
Όταν λέγεται ότι υπάρχει ανταλλαγή μεταξύ ταχύτητας και ακρίβειας, δεν αστειεύονται. Μπορεί να υπάρχουν σημαντικά ζητήματα απόδοσης που πρέπει να λάβετε υπόψη. Αυτό το άρθρο αξίζει να αναφερθεί εξ ολοκλήρου:
Υπάρχουν πραγματικά σημαντικά, θανατηφόρα προβλήματα απόδοσης (όπως καθυστερήσεις φόρτωσης 30 δευτερολέπτων ή περισσότερο) σε κινητές συσκευές κατά τη χρήση του optimizeLegibility για μεγάλες σελίδες. Εφαρμόστε το μόνο αν γνωρίζετε το μέγιστο μήκος κειμένου. (Επίσης, αποφύγετε τη χρήση του για πελάτες Android, τουλάχιστον στις παλαιότερες εκδόσεις που εξακολουθεί να χρησιμοποιεί ο καθένας: το πρόγραμμα απόδοσης γραμματοσειρών έχει συχνά πολύ περίεργα σφάλματα όταν είναι ενεργοποιημένη αυτή η λειτουργία.)
Έκανα κάποιες δοκιμές με το Instapaper για να προσδιορίσω κατά προσέγγιση όρια απόδοσης βελτιστοποίησης αξιοπιστίας. Ένα άρθρο 5.000 λέξεων στο Instapaper για iOS, για παράδειγμα, θα χρησιμοποιεί μόνο το optimizeLegibility σε συσκευές με CPU A5 ή μεγαλύτερη. Για να αποφύγετε προβλήματα σε παλαιότερες συσκευές iOS, δεν θα συνιστούσα τη χρήση του optimizeLegibility τυφλά και άνευ όρων σε σελίδες μεγαλύτερες από 1.000 λέξεις. Και δεν θα συνιστούσα να το ενεργοποιήσετε καθόλου στο Android.
Είναι δελεαστικό να κάνετε:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Αλλά να είστε προσεκτικοί για αυτό, φαίνεται επικίνδυνο ειδικά όταν εφαρμόζεται σε μια αυθαίρετη σελίδα.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Ίσως μετά το Blink; | Όχι | 2.3+; | 3+; |
Υπάρχουν διάφορα σφάλματα. Πρόβλημα Android με νέες γραμμές. Το Chrome έχει διάφορες, συμπεριλαμβανομένης της απόστασης γραμμάτων. Το Safari (και άλλοι) είναι προεπιλεγμένο για βελτιστοποίηση ταχύτητας και όχι καθορισμό εν κινήσει.