Prikazivanje teksta - CSS-trikovi

Anonim

text-renderingNekretnina u CSS vam omogućuje da odaberete kvalitetu teksta preko brzine (ili obratno), omogućujući vam da fino podešavanje optimizaciju sugerirajući pregledniku kako bi trebalo donijeti tekst na zaslonu. Rekao je još jedan način u MDN-u:

text-renderingCSS svojstvo pruža informacije o renderiranje motor o tome što za optimizaciju pri donošenju teksta. Preglednik pravi kompromise između brzine, čitljivosti i geometrijske preciznosti.

Neke primjere prije / poslije možete vidjeti ovdje. Ponekad je rezultat samo izravno bolje kerning:

Neke datoteke fontova sadrže dodatne informacije o načinu prikazivanja fonta. optimizeLegibilitykoristi ove podatke i optimizeSpeedne koristi ih.

Primjer

p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )

Izvođenje

Kad se kaže da postoji kompromis između brzine i preciznosti, oni se ne šale. Postoje značajni problemi s performansama koje treba razmotriti. Vrijedno je citirati taj članak:

Zapravo postoje značajni, efektivno fatalni problemi u izvedbi (poput kašnjenja učitavanja od 30 sekundi ili dulje) na mobilnim uređajima kada se koristi optimizeLegibility za duge stranice. Primijenite ga samo ako znate koja će biti maksimalna duljina teksta. (Također, izbjegavajte ga koristiti za Android klijente, barem na starijim verzijama koje još uvijek svi koriste: njegov prikazivač fontova često ima vrlo čudne greške kad je ovaj način omogućen.)

Proveo sam neko testiranje s Instapaperom kako bih odredio približna ograničenja izvedbe optimizeLegability. Članak od 5000 riječi u Instapaperu za iOS, na primjer, upotrebljavat će optimizeLegibility samo na uređajima s procesorom klase A5 ili većim. Kako bih izbjegao probleme na starijim iOS uređajima, ne bih preporučio slijepu i bezuvjetnu upotrebu optimizeLegability na bilo kojoj stranici duljoj od oko 1.000 riječi. I uopće ne bih preporučio da ga omogućite na Androidu.

Primamljivo je to učiniti:

/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )

Ali budite oprezni oko toga, čini se opasnim, pogotovo ako se primijeni na proizvoljnu stranicu.

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
4+ 5+ 3+ Možda post-Blink? Ne 2,3+? 3+?

Postoje razne bube. Android problem s novim linijama. Chrome ima razne, uključujući razmake između slova. Safari (i drugi) zadani su za optimizaciju brzine, a ne za određivanje u letu.