Kuinka saada teksti renderöimään täydellisesti

Kaunin kirjasimen valitseminen on turhaa, jos se näyttää ruudulta ruma. Jotta vältetään kamala - tai mikä pahempaa - lukukelvoton teksti, sinun on aina testattava, toimiiko fontti hyvin vierailijoidesi käyttämissä laitteissa. Saatat olla yllättynyt; suurin osa kävijöistäsi ei todennäköisesti käytä samaa laitetta, jota käytät suunnittelussa ja kehittämisessä. Itse asiassa suurin osa Internetissä surffaavista ihmisistä käyttää Android- ja Windows-koneita.

StatCounter Global Statsin mukaan (huhtikuu 2017) maailmanlaajuinen käyttöjärjestelmän käyttö. Applen laitteet edustavat vain pienen osan maailmanlaajuisesta käytöstä, kun taas Android ja Windows hallitsevat.



StatCounter Global Statsin mukaan (huhtikuu 2017) maailmanlaajuinen käyttöjärjestelmän käyttö. Applen laitteet edustavat vain pienen osan maailmanlaajuisesta käytöstä, kun taas Android ja Windows hallitsevat.

Paras tapa testata kirjasimen käyttäytymistä on asettaa näytteeksi fontti ja kokeilla sitä kaikilla kohdistamillasi laitteilla. Huono renderointi on erityisen havaittavissa ohuissa painoissa.



Esimerkiksi fontti, joka toimii hyvin MacOS: ssa, voi näyttää hauraalta Windowsissa (katso alla oleva kuva). On tärkeää käyttää todellisia laitteita, koska selaimen testaustyökalut ja virtuaalikoneet ovat usein epätarkkoja (lisätietoja siitä myöhemmin).

kuinka piirtää yksinkertainen lintu askel askeleelta

Jubilat Thin Windows 7 (vasen) ja macOS (oikea). Huomaa, että macOS: ssa teksti näyttää



Jubilat Thin Windows 7 (vasen) ja macOS (oikea). Huomaa, että macOS: ssa teksti näyttää 'painavammalta' kuin Windows 7: ssä.

Jos sinulla ei vielä ole sivustosi sisältöä (tsk!), Anna Tim Brownille Web-fontin malli pyöri. Se asettaa sisällön useisiin tekstikokoihin ja eri taustaväreillä. Se ei korvaa todellista sisältöä, mutta se tapahtuu ripaus.

Joskus sinulla on onnekas, ja valitsemasi kirjasin on suunniteltu nimenomaan näytöille: Hoefler & Co: n ScreenSmart, Monotype's eText ja Font Bureau's Reading Edge ovat esimerkkejä kokoelmista, jotka on erityisesti suunniteltu näyttöä ajatellen, ja niiden pitäisi näyttää kauniilta kaikkialta. Tietysti kannattaa tarkistaa tekstin renderointi fontin alkuperästä riippumatta.

Mutta tarkalleen miksi teksti näyttää erilaiselta selaimelta toiselle? Vastaamiseksi tähän kysymykseen meidän on tehtävä nopea kiertotie tekstin renderoinnin hienoista yksityiskohdista.



Rasterointi ja antialiasing

Kirjasimen ääriviivojen muuntamista pikseleiksi kutsutaan rasteroinniksi. Käyttöjärjestelmän tekstinmuokkausmoottori sijoittaa kunkin merkin ääriviivat (eli muodon) haluttuun fonttikokoon pikseliruudukossa. Seuraavaksi se värittää kaikki pikselit, joiden keskusta on ääriviivan sisällä (katso alla oleva kuva).

kuinka kääntää kirje Photoshopissa

Bézier-käyrästä pikseleihin. Vasemmalla on merkin

Bézier-käyrästä pikseleihin. Vasemmalla on merkin 'a' ääriviivat. Keskellä tämä ääriviiva asetetaan pikseliristikkoon; kaikki pikselit, joiden keskipiste on ääriviivojen sisällä, on päällä. Oikealla on tuloksena oleva rasterointi.

Tässä esimerkissä pikseli on joko päällä tai pois päältä riippumatta siitä, kuinka suuri osa ääriviivasta pikselissä on. Tätä matemaattisesti täydellisten ääriviivojen lähentämistä kutsutaan aliasiksi; antialiasing-yritykset lieventää karkeita portaikon kaltaisia ​​ulkonäköjä, jotka johtuvat näytön rajoitetusta tarkkuudesta.

Antialiasingin idea on selvittää, kuinka suuri osa ääriviivoista on jokaisessa pikselissä, ja edustaa sitä harmaasävyarvolla. Toisin sanoen, jos ääriviivat peittävät 50 prosenttia pikselistä, se käyttää 50 prosenttia mustaa pikselin värjäämiseen. Jos pikseli on kokonaan ääriviivojen sisällä, käytetään 100-prosenttisesti mustaa ja niin edelleen. Tämä johtaa antialiased-renderointiin, joka vähentää aliasia (katso alla oleva kuva). Näet usein termin 'harmaasävyjen antialiasing', jota käytetään kuvaamaan tätä vaikutusta.

Antialiasointi harmaasävyarvoilla edustaa kunkin pikselin ääriviivojen peittoa tuottaa parempia tuloksia.

Antialiasointi harmaasävyarvoilla edustaa kunkin pikselin ääriviivojen peittoa tuottaa parempia tuloksia.

Vaikka antialiasing parantaa tekstin renderointia, on mahdollista parantaa tulosta edelleen käyttämällä alipikselien antialiasingia. Alipikselien antialiasing käyttää näyttöjen ominaisuuksia rasteroidun tekstin tarkkuuden lisäämiseksi. Jokainen näytön pikseli koostuu kolmesta pitkänomaisesta alipikselistä: punaisesta, vihreästä ja sinisestä (muita kokoonpanoja on olemassa, mutta samat periaatteet ovat voimassa). Käyttöjärjestelmä voi ohjata näitä alipikseleitä erikseen; alipikselin antialiasing hyödyntää sitä soveltamalla kattavuuslaskentaa kullekin alipikselille (katso alla oleva kuva).

Kohdistamalla yksittäiset alipikselit, alipikselien antialiasointi lisää tehokkaasti renderoidun tekstin tarkkuutta. Paljaan silmän havaitsemat värit (vasen) ovat seurausta yksilöllisten peittoarvojen asettamisesta kullekin alipikselille (oikealle); punaisen, vihreän ja sinisen alipikselit muodostavat yhden havaittavan värin.

Kohdistamalla yksittäiset alipikselit, alipikselien antialiasointi lisää tehokkaasti renderoidun tekstin tarkkuutta. Paljaan silmän havaitsemat värit (vasen) ovat seurausta yksilöllisten peittoarvojen asettamisesta kullekin alipikselille (oikealle); punaisen, vihreän ja sinisen alipikselit muodostavat yhden havaittavan värin.

Näiden tekstinmuodostusvaihtoehtojen ero ilmenee, kun aloitat työskentelyn pienemmillä tekstikokoilla. Ilman antialiasiaa hahmot menettävät nopeasti erottuvat ääriviivat. Harmaasävyinen antialiasing saa hahmot hämärtymään, mutta säilyttää muotonsa. Alipikselin antialiasing tekee terävistä hahmoista, mutta tuo myös jonkin verran värejä hahmon reunojen ympärille.

Antialiasing-vinkkejä

Voit muuttaa antialiasing-asetuksia ei-standardin kautta -webkit-font-tasoitus ja -moz-osx-fontti-tasoitus CSS-ominaisuudet. Valitettavasti monet CSS-kehykset ja kirjastot käyttävät antialiased ja harmaasävy arvot, jotta teksti näyttäisi kevyemmältä macOS: lla. Suurin osa kehittäjistä ja suunnittelijoista ei kuitenkaan ymmärrä, että tämä poistaa alipikselien antialiaseutumisen käytöstä ja tekee tekstistä epäselvämmän, mikä vahingoittaa luettavuutta.

Joku toisen suosiman tekstin renderoinnin muuttaminen vähemmän luettavaksi on erittäin harkitsematonta. Jos sinulla on oltava kevyempi teksti, käytä kevyempää painoa sen sijaan, että poistat käytöstä alipikselien hahmonnuksen.

Tekstin renderointimoottorit

Suurin osa käyttöjärjestelmistä käyttää omaa tekstinsyöttömoottoriaan, kun taas toiset käyttävät samaa avoimen lähdekoodin moottoria (vaikkakaan ei välttämättä samalla kokoonpanolla). Ne kaikki kuitenkin tukevat antialiaseja ja alipikselien antialiaseja, mutta eroavat toisistaan ​​hieman niiden toteutuksessa. Monissa käyttöjärjestelmissä antialiasing-menetelmän valinta on käyttäjän valittavissa. Esimerkiksi Windowsissa alipikselien antialiasointia kutsutaan ClearType; macOS: ssa sitä kutsutaan LCD-fonttien tasoitukseksi.

Tällä hetkellä on neljä päätekstiä tuottavaa moottoria: Graphics Device Interface (tunnetaan myös nimellä GDI) ja DirectWrite Windowsissa; Core Graphics MacOS: lla ja iOS: lla; ja avoimen lähdekoodin FreeType Linuxissa, Chrome OS: ssä ja Androidissa.

Yleisesti ottaen selain käyttää tekstinkäsittelymoottoria, joka on natiivi käyttöjärjestelmästä, jolla se on käynnissä. Esimerkiksi Chrome käyttää DirectWriteä Windowsissa, Core Graphicsia macOS: ssä ja FreeTypeä Androidissa. Windows on ainutlaatuinen siinä mielessä, että se tarjoaa kaksi tekstin renderointimoottoria: GDI ja uudempi DirectWrite.

Kaikki modernit selaimet käyttävät DirectWrite-sovellusta, joten sinun ei tarvitse huolehtia GDI-tallennuksesta yhdestä poikkeuksesta: jotkut selaimet jäävät huonompaan GDI-renderöintiin, jos koneessa ei ole erillistä grafiikkalaitteistoa. Verkkoselaimen testaustyökaluilla ja virtuaalikoneilla ei usein ole erillistä grafiikkalaitteistoa, joten tekstin renderointi näillä työkaluilla ei ole tarkka.

Ihannetapauksessa kaikki teksti renderöidään käyttämällä alipikselien antialiasointia, koska se luo luettavimman tekstin. Valitettavasti se ei ole aina mahdollista - esimerkiksi alipikselien antialiasointi on usein pois käytöstä laitteissa, joita voidaan kääntää, kuten tableteissa ja puhelimissa. Kun käännät näiden laitteiden näyttöä, alipikselit eivät ole enää järjestetty rasterointilaitteen odottamaan kuvioon ja ne aiheuttavat alipikselien antialiasisoinnin näyttävän rumalta.

Lisälukemista: valinnasta optimointiin Webfont-käsikirja näyttää, kuinka webfontit voivat tehdä verkosta visuaalisesti monipuolisemman, tehokkaamman ja luettavamman ympäristön.

miten tehdä ihon sävyt akryylimaalilla
Lisälukemista: valinnasta optimointiin Webfont-käsikirja näyttää, kuinka webfontit voivat tehdä verkosta visuaalisesti monipuolisemman, tehokkaamman ja luettavamman ympäristön.

Selaimet myös poistavat alipikselien antialiaation käytöstä vastaavissa tilanteissa, esimerkiksi kun tekstiä käännetään tai animoidaan. Tällöin rasteroitu teksti ei enää vastaa tekstin alkuperäisen sijainnin alipikseliasettelua ja se on rasteroitava uudelleen. Tämä on kallista, varsinkin animaatioille, joten useimmat selaimet palaavat harmaasävyjen antialiaseihin, jotka eivät kärsi samasta ongelmasta ja toimivat missä tahansa suunnassa.

Jotkin selaimet - esimerkiksi MacOS: n Chrome - myös poistavat alipikselien antialiaseja käytöstä korkean resoluution näytöissä yhtenäisemmän käyttökokemuksen tarjoamiseksi. Muut selaimet mahdollistavat alipikselien antialiaation vain pienessä tekstissä, koska pienet muutokset tekstin renderoinnissa ovat vähemmän näkyvissä suuremmissa kooissa.

paras kohta- ja ampumakamera heikossa valaistuksessa ja zoomauksessa

On olemassa useita muita tapauksia, joissa selaimet estävät alipikselien antialiasoinnin. Säännöt, joita selaimet käyttävät antialiasing-menetelmän valitsemiseen, päivitetään jatkuvasti uusia kulmatapauksia ja ongelmia löytyy . Näiden toistuvien muutosten vuoksi on erittäin vaikea seurata, mitä tekstin renderoinnissa tapahtuu. Aikaisemmin käytetty alipikselien antialiasointi saattaa palata harmaasävyyn seuraavan selainpäivityksen yhteydessä. Ainoa tapa tietää varmasti, miten tekstisi hahmontuu, on testata todellisilla laitteilla.

Olet todennäköisesti tottunut testaamaan sivustoasi useissa selaimissa. Tekstin renderoinnin testaaminen lisää moninkertaisen testauksen määrää. Sinun ei tarvitse vain tarkistaa kaikki käyttöjärjestelmien ja selainten yhdistelmät, vaan myös kaikki yleiset tekstin renderointiasetukset.

Jotkut laitteet voidaan esimääritellä käyttämään harmaasävyn antialiasointia, kun taas toiset käyttävät sekoitusta harmaasävyn ja alipikselien antialiaseista. Vieläkin vaikeammaksi ei ole mahdollista käyttää selaimen testaustyökaluja tai virtuaalikoneita, koska tekstin renderointi eroaa usein todellisista laitteista.

Testauksessa käytä aina edustavaa näytettä sisällöstäsi. Kuvakirjasto soveltuu erinomaisesti tyyppihahmonnuksen testaamiseen, koska se sisältää laajan otoksen sisällöstäsi: otsikot, tekstit, tarrat, taustavärit ja animaatiot. Kun sinulla on esimerkkejä sisällöstäsi yhdellä sivulla, voit tarkistaa kaikki tyylien ja taustaväriyhdistelmät nopeasti.

Ole etsimässä tekstiä, joka ei ole luettavissa tai näyttää ohuelta joissakin käyttöjärjestelmissä. Jos löydät ongelman, vaihda eri fontiksi samassa kirjasinperheessä, tee teksti tummemmaksi tai valitse toinen kirjasinlaji. Onnea.

Tämä artikkeli julkaistiin alun perin 301 netissä, maailman myydyimmässä verkkosivujen suunnittelijoille ja kehittäjille suunnatussa lehdessä. Osta numero 301 tai tilaa net .

Aiheeseen liittyvät artikkelit: