Szövegmegjelenítés - CSS-trükkök

Anonim

A text-renderingCSS tulajdonság lehetővé teszi a szöveg minőségének kiválasztását a sebesség helyett (vagy fordítva), lehetővé téve az optimalizálás finomhangolását azzal, hogy javaslatot tesz a böngészőnek arra, hogy miként jelenítsen meg szöveget a képernyőn. Mondott egy másik módszert az MDN-ben:

A text-renderingCSS tulajdonság információt nyújt a renderelő motornak arról, hogy mire kell optimalizálni a szöveg megjelenítésekor. A böngésző kompromisszumokat köt a sebesség, az olvashatóság és a geometriai pontosság között.

Itt láthat néhány példát előtte / utána. Néha az eredmény csak egyenesen jobb kernelés:

Egyes betűtípusfájlok további információkat tartalmaznak a betűtípus megjelenítéséről. optimizeLegibilityfelhasználja ezeket az információkat, és optimizeSpeednem.

Példa

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

Teljesítmény

Amikor azt mondják, hogy kompromisszum van a sebesség és a pontosság között, akkor nem viccelnek. Jelentős teljesítményproblémákat lehet figyelembe venni. Ezt a cikket érdemes teljesen idézni:

Valójában jelentős, ténylegesen végzetes teljesítményproblémák vannak (például 30 másodperces vagy hosszabb betöltési késések) a mobileszközökön, amikor az OptimizeLegibility-t hosszú oldalakhoz használják. Csak akkor alkalmazza, ha tudja, hogy mekkora lesz a maximális szöveghossz. (Ezenkívül kerülje az androidos kliensek használatát, legalábbis a régebbi verzióknál, amelyeket mindenki még használ: a betűtípus-megjelenítője gyakran nagyon furcsa hibákat tartalmaz, amikor ez a mód engedélyezve van.)

Végeztem néhány tesztet az Instapaperrel, hogy meghatározzam az optimizeLegibility teljesítménykorlátok hozzávetőleges értékét. Például egy 5000 szóból álló cikk az Instapaper for iOS rendszerben csak az A5 osztályú vagy nagyobb CPU-val rendelkező eszközökön fogja használni az optimizeLegibility funkciót. A régebbi iOS-eszközökkel kapcsolatos problémák elkerülése érdekében nem javasolnám vakon és feltétel nélkül az optimizeLegibility használatát bármely, körülbelül 1000 szónál hosszabb oldalon. És egyáltalán nem javasolnám engedélyezését Androidon.

Csábító erre:

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

De ne légy óvatos, ez veszélyesnek tűnik, főleg ha önkényes oldalra alkalmazzák.

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
4+ 5+ 3+ Esetleg pislogás után? Dehogy 2.3+? 3+?

Különféle hibák vannak. Android kérdés új sorokkal. A Chrome-nak többféle van, beleértve a betűket is. A Safari (és mások) alapértelmezés szerint a sebesség optimalizálása helyett a menet közbeni meghatározás.