Teksta atveide - CSS-triki

Anonim

text-renderingĪpašums CSS ļauj jums izvēlēties teksta kvalitāti, nevis ātrumam (vai otrādi), kas ļauj jums smalka melodija optimizāciju, ierosinot pārlūku, kā tai vajadzētu padarīt tekstu uz ekrāna. MDN teica citu veidu:

text-renderingCSS īpašums sniedz informāciju renderēšanas dzinējs par to, lai optimizētu kad attēlo tekstu. Pārlūkprogramma veic kompromisus starp ātrumu, salasāmību un ģeometrisko precizitāti.

Šeit varat apskatīt dažus pirms / pēc piemēriem. Dažreiz rezultāts ir tikai taisni labāks:

Daži fontu faili satur papildu informāciju par fonta renderēšanas veidu. optimizeLegibilityizmanto šo informāciju un optimizeSpeedto neizmanto.

Piemērs

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

Izrāde

Kad saka, ka starp ātrumu un precizitāti notiek kompromiss, viņi nejoko. Var izskatīt ievērojamas veiktspējas problēmas. Šo rakstu ir vērts pilnībā citēt:

Mobilajām ierīcēm faktiski ir būtiskas, faktiski letālas veiktspējas problēmas (piemēram, 30 sekunžu ilgas vai ilgākas kavēšanās), lietojot optimizeLegibility garām lapām. Lietojiet to tikai tad, ja zināt, kāds būs maksimālais teksta garums. (Izvairieties arī no tā, lai to lietotu Android klientiem, vismaz vecākajās versijās, kuras visi joprojām izmanto: tā fontu renderētājam bieži ir ļoti dīvainas kļūdas, kad šis režīms ir iespējots.)

Es veicu dažus testus ar Instapaper, lai noteiktu aptuvenos optimizeLegibility veiktspējas ierobežojumus. Piemēram, 5000 vārdu rakstā Instapaper for iOS tiks izmantots optimizeLegibility tikai ierīcēs ar A5 klases vai lielāku procesoru. Lai izvairītos no problēmām vecākās iOS ierīcēs, es neiesakos akli un bez nosacījumiem izmantot optimizeLegibility visās lapās, kas garākas par aptuveni 1000 vārdiem. Un es vispār neieteiktu to iespējot operētājsistēmā Android.

Tas ir vilinoši darīt:

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

Tomēr esiet piesardzīgs, šķiet bīstams, it īpaši, ja tas tiek lietots patvaļīgā lapā.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
4+ 5+ 3+ Varbūt pēc mirkšķināšanas? 2.3+? 3+?

Ir dažādas kļūdas. Android jautājums ar jaunām līnijām. Pārlūkam Chrome ir dažādas iespējas, ieskaitot atstarpes starp burtiem. Safari (un citi) pēc noklusējuma optimizē ātrumu, nevis nosaka lidojuma laikā.