Teksto perteikimas - CSS-gudrybės

Anonim

text-renderingCSS nuosavybė leidžia jums pasirinkti kokybę tekstą virš greičio (arba atvirkščiai), kuri leidžia jums sureguliuoti optimizavimas, siūlydamas į naršyklę, kaip ji turėtų teikti tekstą ekrane. Pasakė dar vieną būdą MDN:

text-renderingCSS savybė suteikia informaciją rendering varikliu apie ką optimizuoti, kai teikiant tekstą. Naršyklė daro kompromisus tarp greičio, įskaitomumo ir geometrinio tikslumo.

Keletą pavyzdžių prieš / po galite pamatyti čia. Kartais rezultatas yra tiesiog tiesesnis, geresnis:

Kai kuriuose šriftų failuose yra papildomos informacijos apie šrifto pateikimo būdą. optimizeLegibilitynaudojasi šia informacija, o optimizeSpeedne.

Pavyzdys

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

Spektaklis

Kai sakoma, kad yra kompromisas tarp greičio ir tikslumo, jie nejuokauja. Galima apsvarstyti didelių našumo problemų. Tą straipsnį verta visiškai pacituoti:

Naudojant „optimizeLegibility“ ilgiems puslapiams, mobiliuosiuose įrenginiuose iš tikrųjų yra reikšmingų, faktiškai mirtinų našumo problemų (pvz., 30 sekundžių trukmės vėlavimas ar daugiau). Taikykite jį tik tuo atveju, jei žinote, koks bus maksimalus teksto ilgis. (Be to, venkite jo naudoti „Android“ klientams, bent jau senesnėse versijose, kurias visi vis dar naudoja: šrifto atvaizdavimo priemonėje dažnai yra labai keistų klaidų, kai įjungtas šis režimas.)

Atlikau keletą bandymų su „Instapaper“, kad nustatyčiau apytiksles „optimizeLegibility“ našumo ribas. Pavyzdžiui, 5000 žodžių straipsnyje „Instapaper“, skirtame „iOS“, „optimizeLegibility“ bus naudojamas tik įrenginiuose, turinčiuose A5 klasės ar didesnį procesorių. Kad išvengtumėte senesnių „iOS“ įrenginių problemų, nerekomenduočiau aklai ir besąlygiškai naudoti „optimizeLegibility“ bet kuriuose puslapiuose, ilgesniuose nei maždaug 1000 žodžių. Ir apskritai nerekomenduočiau jo įgalinti „Android“.

Tai vilioja tai padaryti:

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

Tačiau būkite atsargūs dėl to, atrodo pavojinga, ypač kai jis taikomas savavališkam puslapiui.

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
4+ 5+ 3+ Gal po mirksėjimo? Ne 2.3+? 3+?

Yra įvairių klaidų. „Android“ problema su naujomis eilutėmis. „Chrome“ yra įvairių, įskaitant tarpus tarp raidžių. „Safari“ (ir kiti) pagal numatytuosius nustatymus optimizuoja greitį, o ne nustato skriejant.