font-displayOminaisuus määrittää, kuinka fonttitiedostot ladataan ja näytetään selaimen. Sitä sovelletaan @font-facesääntöön, joka määrittelee mukautetut fontit tyylitaulukossa.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Arvot
font-displayOmaisuuden hyväksyy viisi arvoa:
auto(oletus): Antaa selaimen käyttää lataamiseen oletusmenetelmäänsä, joka on useimmiten samanlainen kuinblockarvo.block: Kehottaa selainta piilottamaan tekstin hetkeksi, kunnes fontti on ladattu kokonaan. Tarkemmin sanottuna selain piirtää tekstin näkymättömällä paikkamerkillä ja vaihtaa sen sitten mukautetun kirjasimen kanssa heti, kun se latautuu. Tätä kutsutaan myös "näkymättömän tekstin salamaksi" tai FOIT.swap: Kehottaa selainta käyttämään varakirjasinta tekstin näyttämiseen, kunnes mukautettu fontti on ladattu kokonaan. Tätä kutsutaan myös "tyylittämättömän tekstin salamaksi" tai FOUT.fallback: Toimii kompromissina arvojenautoja välilläswap. Selain piilottaa tekstin noin 100 ms: n ajan, ja jos fonttia ei ole vielä ladattu, käyttää varatekstiä. Se vaihtaa uuteen kirjasimeen sen lataamisen jälkeen, mutta vain lyhyen vaihtojakson aikana (todennäköisesti 3 sekuntia).optional: Kutenfallbacktämä arvo käskee selainta piilottamaan tekstin ensin ja siirtymään sitten varakirjasimeen, kunnes mukautettu fontti on käytettävissä. Tämän arvon avulla selain voi kuitenkin määrittää, käytetäänkö mukautettua kirjasinta edes lainkaan, käyttämällä käyttäjän yhteysnopeutta määrittävänä tekijänä silloin, kun hitaammat yhteydet eivät todennäköisesti saa mukautettua kirjasinta.
Tässä on toinen tapa ajatella heitä
| Estoaika | Vaihtoaika | |
|---|---|---|
| lohko | Lyhyt | Ääretön |
| vaihtaa | Ei mitään | Ääretön |
| perääntyä | Erittäin lyhyt | Lyhyt |
| valinnainen | Erittäin lyhyt | Ei mitään |
Miksi tarvitsemme font-display
Ennen kuin meillä oli laaja tuki tuelle @font-face, typografinen arsenaalimme rajoittui paikallisiin kirjasimiin, joissa ainoat käytettävissä olevat fontit olivat valmiiksi ladattuja loppukäyttäjän tietokoneisiin. Kutsumme näitä "web safe" -fonteiksi, koska selaimen ei tarvitse ladata mitään, jotta ne voidaan renderoida.
Sitten tuli @font-facesääntö, joka antoi web-suunnittelijoille ja käyttöliittymän kehittäjille uusia typografisia voimia toisin kuin koskaan ennen. Se antoi meille mahdollisuuden ladata kirjasintiedostoja palvelimelle ja kirjoittaa tyylisivujemme joukko sääntöjä, jotka nimeävät fontin ja kertovat selaimelle, mistä tiedostot ladataan. Se aiheutti myös palveluja, kuten Google Fonts, jotka toivat mukautettuja fontteja massalle. Lopuksi merkittävä este, joka erotti verkkosuunnittelun painosuunnittelusta, oli kaatunut!
Mukautetut fontit olivat kuitenkin (ja tulevat edelleen) hintaan. Kirjasintiedostot voivat olla suuria, ja ylimääräinen aika tiedostojen lataamiseen voi hidastaa sivuston suorituskykyä, erityisesti hitaamman verkkoyhteyden omaavien laitteiden kanssa. Rajoitettujen tietosuunnitelmien käyttäjille aiheuttamista lisäkustannuksista tuli myös tekijä.
Eräs toinen erityinen huolenaihe, joka syntyi mukautettujen kirjasinten kanssa, on se, jota kutsuttiin "tyylittömän tekstin salamaksi" tai lyhyesti FOUTiksi. Selaimet näyttävät oletusarvoisesti järjestelmän fontin odottaessaan mukautetun fontin lataamista. Tämä antoi verkkosivujen latautua nopeammin, mutta herätti huolta web-suunnittelijoista, jotka pitivät tätä käyttäjän käyttökokemuksen kaappaamisena ja vääränä esityksenä suunnitellussa suunnittelussa. Verkkoselaimet piilottavat nykyään yleensä tekstin, kunnes mukautettu kirjasin on ladattu, jota nyt kutsutaan "näkymättömän tekstin salamaksi" tai FOIT.
FOUT tai FOIT eivät ole hienoja. Meillä on tapoja optimoida mukautettujen fonttien suorituskyky helpottamaan vaikutuksia. Nyt meidän on font-displaykuitenkin kerrottava selaimelle, haluammeko FOUT, FOIT vai jopa jotain siltä väliltä.
Tukea testataan
Šime Vidasin mainitsema mielenkiintoinen huomautus:
CSS-fontinäyttö on
@font-facekuvaaja eikä ominaisuus, joten sen tukea selaimessa ei voida testata ominaisuuskyselyillä (CSS-@supportssääntö ja CSS.support API).
Lisää tietoa
- CSS-fonttien renderoinnin ohjausmoduulin tason 1 määrittely: Luonnos ominaisuuden määrityksestä.
font-displaymassoille: Jeremy Wagner esitteli meidät kiinteistöön täällä CSS-temppuilla.- Käyttäminen
@font-face: Kattava kuvaus säännöstä ja parhaista käytännöistä sen käyttämiseksi. - Järjestelmän fonttipino: Katkelma, jolla omat fontit hylätään kokonaan ja luotetaan yksinomaan käyttäjän järjestelmäkirjasimiin.
- Kirjasimen suorituskyvyn hallinta
font-display: Googlen hieno kirjoitus aiheesta.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 60 | 58 | Ei | 79 | 11.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |