The text-renderingharta di CSS membolehkan anda untuk memilih kualiti teks lebih laju (atau sebaliknya) yang membolehkan anda untuk denda tune pengoptimuman dengan mencadangkan kepada pelayar bagaimana ia harus menjadikan teks pada skrin. Berkata dengan cara lain di MDN:
The
text-renderingharta CSS memberi maklumat kepada enjin pentafsiran tentang apa untuk mengoptimumkan apabila memberikan teks. Penyemak imbas membuat pertukaran antara kepantasan, keterbacaan, dan ketepatan geometri.
Anda boleh melihat beberapa contoh sebelum / selepas di sini. Kadang-kadang hasilnya adalah kerning yang lebih baik:
Beberapa fail fon mengandungi maklumat tambahan mengenai bagaimana font tersebut harus diberikan. optimizeLegibilitymemanfaatkan maklumat ini, dan optimizeSpeedtidak.
Contohnya
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Persembahan
Apabila dikatakan bahawa terdapat pertukaran antara kelajuan dan ketepatan, mereka tidak bergurau. Terdapat banyak masalah prestasi yang perlu dipertimbangkan. Artikel itu patut dipetik sepenuhnya:
Sebenarnya terdapat masalah prestasi yang berkesan dan boleh membawa maut (seperti kelewatan memuatkan 30 saat, atau lebih lama) pada peranti mudah alih semasa menggunakan optimizeLegibility untuk halaman panjang. Gunakan hanya jika anda tahu berapa panjang teks maksimum. (Juga, elakkan menggunakannya untuk klien Android, setidaknya pada versi lama yang masih digunakan oleh semua orang: perender fonnya sering kali mempunyai pepijat yang sangat pelik ketika mod ini diaktifkan.)
Saya melakukan beberapa ujian dengan Instapaper untuk menentukan had prestasi Optimalkan kelayakan. Artikel 5,000 perkataan di Instapaper untuk iOS, misalnya, hanya akan menggunakan OptimalkanLegibility pada peranti dengan CPU kelas A5 atau lebih besar. Untuk mengelakkan masalah pada peranti iOS yang lebih lama, saya tidak akan mengesyorkan menggunakan OptimumLegibility secara membuta tuli dan tanpa syarat pada halaman yang lebih panjang daripada kira-kira 1,000 perkataan. Dan saya sama sekali tidak mengesyorkan untuk menggunakannya di Android
Sangat menggoda untuk melakukan:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Tetapi berhati-hatilah dengan perkara itu, nampaknya berbahaya terutama ketika digunakan pada halaman sewenang-wenangnya.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Mungkin selepas Blink? | Tidak | 2.3+? | 3+? |
Terdapat pelbagai pepijat. Masalah Android dengan barisan baru. Chrome mempunyai pelbagai, termasuk jarak huruf. Safari (dan lain-lain) lalai untuk mengoptimumkan Kecepatan daripada menentukan dengan cepat.