Otamme web-fontteja itsestään selvänä päivänä. Meillä ei aina ollut mahdollisuutta asettaa tekstiä lähes mihin tahansa kirjasintyyppiin. Tarkoitan, että voisimme, mutta silloin meidän pitäisi huokaista ja sanoa: "No, se näyttää hyvältä noin viiden ihmisen tietokoneilta. Toivottavasti kaikki muut pitävät Verdanasta! "
Web-kirjasimet toivat mukanaan paljon tarpeellisia lajikkeita nähtäväksi, muutamia typografian väärinkäytöksiä, jonkinlaista ylimääräistä sivun painoa, kun itse fontit ladattiin, ja salamakuvat tai näkymätön teksti vilkastuivat. No ... munakas, munat, murtuminen, saat idean. Se oli pakko tapahtua.
Jos käyttäjät ovat jumissa katsomassa tyhjää sivua liian kauan, he voivat päättää lähteä
Se on kuitenkin hieman käytettävyysongelma, kun teksti on näkymätön, kunnes mukautettu fontti latautuu. Jos käyttäjät ovat jumissa katselemassa tyhjää sivua liian kauan (ja liian kauan se voi olla millisekuntia), he voivat päättää lähteä. Ja se on riittävän tasainen. Se ei ole käyttäjäystävällinen.
Nopeasti eteenpäin muutaman vuoden kuluttua, ja olemme edistyneet hallinnassa fonttien lataamisessa. Tähän asti olemme tehneet sen kolmannen osapuolen kirjastoilla ja sovellusliittymillä. Mutta nyt, tämä toiminto on viimeinkin CSS: ssä.
Anna fontti-näytön ominaisuus. Se on tällä hetkellä vain Opera, Opera Android ja Chrome. (Se otettiin ensimmäisen kerran käyttöön Chromessa 49 kokeelliseksi ominaisuudeksi.)
Siinä on neljä vaihtoehtoa: auto , swap , backback ja valinnainen .
Pohjimmiltaan font- displayin valitseminen : auto jättää selaimen toimimaan kuten se nyt. Teksti näkyy näkymättömänä, kunnes mukautettu fontti latautuu.
swap on luultavasti mitä useimmat ihmiset käyttävät. Jos fonttia ei ole ladattu, käytetään seuraavaksi fontti-perhe- ominaisuudessa määritettyä fonttia . Kun web-fontti ladataan, se korvataan. Tämä on pohjimmiltaan salamatonta sisältöä, mutta se on käyttäjäystävällisempi kuin näkymätön sisältö, mielestäni.
varakäynti jakaa erot näiden kahden ensimmäisen vaihtoehdon välillä. Viiveen 100 millisekuntia teksti näkyy näkymättömänä. Jos mukautettu kirjasin on ladattu siihen mennessä, sitä käytetään. Jos ei ole, seuraavan peräkkäisen rivin kirjasin määräytyy, kunnes mukautettu kirjasinta ladataan.
valinnainen toimii kuten varakäynti, paitsi selaimen päättää olla lataamatta mukautettua kirjasinta lainkaan, jos käyttäjän yhteys on liian hidas
valinnainen toimii kuten varakäynti, paitsi selaimen päättää olla lataamatta mukautettua kirjasinta lainkaan, jos käyttäjän yhteys on liian hidas.
Ja siellä meillä on se. declaration. Huomaa, että näyttöfontti on tarkoitettu käytettäväksi @ font-face -ilmoituksessa. Tämä tarkoittaa sitä, että se ei toimi kolmannen osapuolen fonttien tarjoajien kuten Typekit tai Google Fontsin kanssa. Kun fonttien näyttö laajenee kuitenkin, on todennäköistä, että ne käyttävät jonkinlaista vaihtoehtoa kyseiselle ominaisuudelle.