CSS'deki text-renderingözellik, metnin kalitesini hıza göre seçmenize (veya tam tersi) izin verir ve tarayıcıya ekranda metni nasıl oluşturması gerektiği konusunda önerilerde bulunarak optimizasyona ince ayar yapmanıza olanak tanır. MDN'de başka bir yol söyledi:
text-renderingCSS Özellik metnini işlerken için optimize ne hakkında render motoruna bilgi sağlar. Tarayıcı hız, okunabilirlik ve geometrik hassasiyet arasında değiş tokuş yapar.
Burada önceki / sonraki örnekleri görebilirsiniz. Bazen sonuç, daha iyi karakter aralığıdır:
Bazı yazı tipi dosyaları, yazı tipinin nasıl oluşturulması gerektiği hakkında ek bilgiler içerir. optimizeLegibilitybu bilgileri kullanır ve kullanmaz optimizeSpeed.
Misal
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Verim
Hız ve hassasiyet arasında bir değiş tokuş olduğu söylendiğinde, şaka yapmıyorlar. Dikkate alınması gereken önemli performans sorunları olabilir. Bu makale tamamen alıntı yapmaya değer:
OptimizeLegibility'yi uzun sayfalar için kullanırken mobil cihazlarda gerçekten önemli, etkili ölümcül performans sorunları (30 saniyelik yükleme gecikmeleri veya daha uzun) vardır. Yalnızca maksimum metin uzunluğunun ne olacağını biliyorsanız uygulayın. (Ayrıca, Android istemcileri için, en azından herkesin hala kullandığı eski sürümlerde kullanmaktan kaçının: bu mod etkinleştirildiğinde, yazı tipi oluşturucuda genellikle çok garip hatalar olur.)
OptimizeLegibility performans sınırlarını yaklaşık olarak belirlemek için Instapaper ile bazı testler yaptım. Örneğin, iOS için Instapaper'daki 5.000 kelimelik bir makale, optimizeLegibility'yi yalnızca A5 sınıfı veya daha büyük bir CPU'ya sahip cihazlarda kullanacaktır. Daha eski iOS cihazlarında sorun yaşamamak için optimizeLegibility'yi yaklaşık 1.000 kelimeden uzun sayfalarda körü körüne ve koşulsuz olarak kullanmanızı önermem. Ve bunu Android'de etkinleştirmeyi hiç önermem.
Yapmak cazip:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Ancak buna çok dikkat edin, özellikle keyfi bir sayfaya uygulandığında tehlikeli görünür.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Belki Blink sonrası? | Hayır | 2.3+? | 3+? |
Çeşitli böcekler var. Yeni satırlarla ilgili Android sorunu. Chrome, harf aralığı dahil olmak üzere çeşitli özelliklere sahiptir. Safari (ve diğerleri), anında belirlemek yerine varsayılan olarak Hızı optimize eder.