Kirjasintapahtumat

Kirjasinotapahtumat sisältyvät JavaScript-kirjasinlataukseen, jota käytetään dynaamiseen osittamiseen. Kirjasintapahtumien avulla voit mukauttaa verkkosivuasi sen mukaan, ovatko kirjasimet aktiivisia, edelleen latautumassa vai eivät saatavilla jostain syystä.

Kirjasinotapahtumat eivät ole vielä saatavilla CSS-kirjasinlatauksessa.Jos käytät sivustossasi oletus- tai @import CSS -upotuskoodia, voit sisällyttää toisen JavaScript-kirjaston kirjasinlatauksen mukauttamiseen.

Kirjasinotapahtumien käyttö CSS:ssä

Jotta voisit paremmin hallita sitä, miten sivusi näytetään kirjasimien latautuessa tai niiden ollessa passiivisia, JavaScript-upotuskoodi tarjoaa joukon kirjasinotapahtumia, jotka käynnistyvät kirjasimien ladatessa sivulle.

Pääkirjasinotapahtumia on kolme, joista jokaisella on vastaava luokkanimi (suluissa):

1. loading (.wf-loading): Verkkokirjasimet latautuvat
2. active (.wf-active): Verkkokirjasimet ovat ensisijaisia
3. inactive (.wf-inactive): Verkkokirjasimet ovat passiivisia

Näihin tapahtumiin liittyvät CSS-luokat liitetään HTML-elementtiin latauksen aikana. Niitä voidaan käyttää tyylitiedostoissa hallitsemaan sitä, miten sivu tyylitellään kirjasimien latautuessa. Esimerkiksi:

Kirjasinotapahtumaluokkien yleisiä käyttötarkoituksia ovat tyylittämättömän tekstin välähdyksen hallinta (FOUT) ja varmuuskopiokirjasimien ja -tyylien määrittäminen selaimille, jotka eivät tue verkkokirjasimia tai joissa ne on kytketty pois päältä. On aina hyvä idea sisällyttää varafontteja ja -tyylejä, koska jotkin selaimen, käyttöjärjestelmän ja käyttäjän asetusten yhdistelmät johtavat siihen, että fontit eivät ole käytössä sivullasi.

JavaScript-kirjasinotapahtumat

Nämä kirjasinotapahtumat ovat saatavilla myös JavaScript-kutsukoukuina Typekit.load-menetelmän kautta. Voit välittää objektin, joka sisältää kutsufunktiot, kun kutsut Typekit.load-menetelmää, ja nämä kutsufunktiot käynnistetään eri kirjasintapahtumien yhteydessä latauksen aikana.Esimerkiksi:

JavaScript-kutsuja voidaan käyttää esimerkiksi häivytysten lisäämiseen kirjasimien ladattua tai monimutkaiseen matemaattiseen koon muuttamiseen esitysasetteluissa hahmonnetun tekstin mittojen perusteella.

Näiden peruskirjasinotapahtumien lisäksi tarjotaan myös yksityiskohtaisempia kirjasinotapahtumia yksittäisille kirjasinvariaatioille. Näiden tapahtumien luokkanimet ovat yhdistelmä kirjasinperheen nimestä, kirjasinvariaation kuvauksesta ja kirjasinotapahtuman nimestä. Niinpä esimerkiksi normaalin 400-painoisen Gestan lisääminen projektiin johtaisi kirjasintapahtumaluokkiin kuten wf-gesta-n4-loading ja wf-gesta-n4-active.JavaScript-puolella fontloading-, fontactive- ja fontinactive-takaisinkutsut ovat saatavilla, ja niille voidaan välittää kirjasinperhe ja kirjasinkuvaus kullekin yksittäiselle variaatiolle.

Kirjasinotapahtumien käyttö: tyylittämättömän tekstin välähdyksen (FOUT) hallinta

Jokainen selain käsittelee verkkokirjasimien lataamista omalla tavallaan. Jos selain aluksi näyttää tekstin varakirjasimella ja vaihtaa sitten linkitettyihin kirjasimiin niiden latauksen valmistuttua, tuloksena voi olla välkkyvä muotoilematon teksti eli FOUT.

Kun kirjasimet latautuvat, HTML-elementtiin lisätään luokka .wf-loading. Kun kirjasimet on ladattu, luokka muuttuu muotoon .wf-active. Voit siis lisätä tyylitiedostoihisi seuraavaa:

Voit sitten säätää tyylejä tehdäksesi FOUT:sta vähemmän häiritsevän esim. varmistamalla, että välkkyvä kirjasin ja ladattu verkkokirjasin näyttävät samankokoisilta. Tai voit piilottaa tekstin, kunnes kirjasin on täysin ladattu. Esimerkiksi:

Varakirjasimien tyylittäminen -osiossa on lisää esimerkkejä CSS-tyylien määrittämisestä kirjasintapahtumilla.

Kirjasintapahtumien käyttö: varakirjasimien tyylittäminen

Kirjasimet ladataan resurssina verkkosivulle – aivan kuten kuvat tai video. Käyttöjärjestelmän, verkkoselaimen, asennettujen laajennusten, käyttäjän asetusten ja yhteysnopeuden yhdistelmästä riippuen verkkokirjasimet saattavat joskus epäonnistua lataamisessa. Näissä tapauksissa käytetään sen sijaan CSS-pinon varakirjasimia.

Voit esimerkiksi säätää varakirjasimien kokoa käyttäessäsi tiivistettyä verkkokirjasinta, jotta asettelusi pysyy yhtenäisenä, vaikka verkkokirjasimet eivät latautuisi. Ohjeet:

Kirjasintapahtumien käyttö: näkymättömän tekstin välkkymisen (FOIT) simulointi dynaamisissa projekteissa

Oletuksena dynaamiset projektit hahmentavat verkkokirjasimilla tyylitellyn tekstin muotoilemattoman tekstin välkkymisenä (FOUT). Tämä tarkoittaa, että selain hahmontaa varakirjasimia verkkokirjasimien latauksen aikana ja vaihtaa sitten verkkokirjasimiin, kun ne ovat käytettävissä. Tämä eroaa vaihtoehtoisesta verkkokirjasimien hahmonnustavasta, jossa selain piilottaa tekstin verkkokirjasimien latauksen aikana ja näyttää sitten tekstin verkkokirjasimilla tyyliteltynä, kun verkkokirjasimet on ladattu. Sitä kutsutaan näkymättömän tekstin välkkymisenä (FOIT).

FOUT-lähestymistapa tekee sivuista välittömämmin käytettäviä, erityisesti hitaammilla verkkoyhteyksillä, mutta jos suosit FOIT-lähestymistapaa, voit simuloida sitä kaikissa selaimissa käyttämällä kirjasintapahtumia. Kirjasintapahtumat ovat kolme luokkaa, jotka lisätään elementtiin:

1. .wf-loading: Lisätään kirjasimien latauksen aikana;
2. .wf-active: Lisätään, kun vähintään yksi kirjasin on ladattu;
3. .wf-inactive: Lisätään, kun yhtään kirjasinta ei ole ladattu.

Voit käyttää näitä kolmea luokkaa CSS:ssäsi simuloidaksesi FOIT-latausta piilottamalla tekstin, kun wf-loading-luokka on aktiivinen, ja näyttämällä tekstin, kun wf-active- tai wf-inactive-luokka on aktiivinen:

Jos esimerkiksi h1- ja p-elementit käyttävät verkkokirjasinta, käytä tätä CSS:ää piilottaaksesi ne kirjasimien latauksen aikana.

Lisää samankaltaisia

• Miksi verkkokirjasimeni ovat osoitteesta use.typekit.net?