The text-renderingproperti di CSS memungkinkan Anda untuk memilih kualitas teks di atas kecepatan (atau sebaliknya) yang memungkinkan Anda untuk optimasi fine tune dengan menyarankan ke browser bagaimana harus membuat teks pada layar. Mengatakan cara lain di MDN:
The
text-renderingproperti CSS menyediakan informasi kepada mesin rendering tentang apa yang harus mengoptimalkan untuk saat rendering teks. Browser membuat trade-off antara kecepatan, keterbacaan, dan presisi geometris.
Anda dapat melihat beberapa contoh sebelum / sesudah di sini. Kadang-kadang hasilnya adalah kerning yang lebih baik:
Beberapa file font berisi informasi tambahan tentang bagaimana font harus dirender. optimizeLegibilitymemanfaatkan informasi ini, dan optimizeSpeedtidak.
Contoh
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Performa
Ketika dikatakan bahwa ada pertukaran antara kecepatan dan presisi, mereka tidak main-main. Mungkin ada masalah kinerja yang signifikan untuk dipertimbangkan. Artikel itu layak dikutip seluruhnya:
Sebenarnya ada masalah kinerja yang signifikan dan fatal secara efektif (seperti penundaan pemuatan 30 detik, atau lebih lama) pada perangkat seluler saat menggunakan optimizationLegibility untuk halaman yang panjang. Terapkan hanya jika Anda tahu panjang teks maksimumnya. (Selain itu, hindari menggunakannya untuk klien Android, setidaknya pada versi lama yang masih digunakan semua orang: penyaji fontnya sering kali memiliki bug yang sangat aneh saat mode ini diaktifkan.)
Saya melakukan beberapa pengujian dengan Instapaper untuk menentukan perkiraan batas kinerja optimasiLegibilitas. Artikel 5.000 kata di Instapaper untuk iOS, misalnya, hanya akan menggunakan optimizationLegibility pada perangkat dengan CPU kelas A5 atau lebih tinggi. Untuk menghindari masalah pada perangkat iOS yang lebih lama, saya tidak akan merekomendasikan penggunaan optimalkanLegibilitas secara membabi buta dan tanpa syarat pada halaman mana pun yang lebih panjang dari sekitar 1.000 kata. Dan saya tidak akan merekomendasikan mengaktifkannya di Android sama sekali.
Sangat menggoda untuk dilakukan:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Tapi berhati-hatilah tentang itu, tampaknya berbahaya terutama jika diterapkan pada halaman yang sewenang-wenang.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Mungkin pasca-Blink? | Nggak | 2.3+? | 3+? |
Ada berbagai bug. Masalah Android dengan jalur baru. Chrome memiliki berbagai, termasuk spasi huruf. Safari (dan lainnya) default untuk mengoptimalkan Kecepatan daripada menentukan dengan cepat.