U font-displayvlasništva definira kako font datoteke učitava i prikazuje u pregledniku. Primjenjuje se na @font-facepravilo koje definira prilagođene fontove u tabeli stilova.
@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 */ )Vrijednosti
font-displayNekretnine prihvaća pet vrijednosti:
auto(zadano): omogućuje pregledniku upotrebu zadane metode za učitavanje, koja je najčešće sličnablockvrijednosti.block: Nalaže pregledniku da nakratko sakrije tekst dok se font ne preuzme u potpunosti. Točnije, preglednik crta tekst nevidljivim rezerviranim mjestom, a zatim ga zamijeni prilagođenim licem fonta čim se učita. To je također poznato kao "bljesak nevidljivog teksta" ili FOIT.swap: Nalaže pregledniku da koristi zamjenski font za prikaz teksta dok se prilagođeni font ne preuzme u potpunosti. Ovo je također poznato kao "bljesak neustrojnog teksta" ili FOUT.fallback: Djeluje kao kompromis izmeđuautoteswapvrijednosti. Preglednik će sakriti tekst otprilike 100 ms i, ako font još nije preuzet, upotrijebit će zamjenski tekst. Zamijenit će se novim fontom nakon preuzimanja, ali samo tijekom kratkog razdoblja zamjene (vjerojatno 3 sekunde).optional: Kaofallback, ova vrijednost govori pregledniku da u početku sakrije tekst, a zatim prijeđe na zamjenski font dok prilagođeni font ne bude dostupan za upotrebu. Međutim, ova vrijednost također omogućuje pregledniku da utvrdi koristi li se uopće prilagođeni font, koristeći brzinu veze korisnika kao odlučujući čimbenik gdje je manja vjerojatnost da će sporije veze primiti prilagođeni font.
Evo još jednog načina da razmišljamo o njima
| Blok Razdoblje | Razmjena razdoblja | |
|---|---|---|
| blok | Kratak | Beskonačno |
| zamijeniti | Nijedna | Beskonačno |
| rezervni | Izuzetno kratko | Kratak |
| neobavezna | Izuzetno kratko | Nijedna |
Zašto trebamo font-display
Prije nego što smo imali široku podršku @font-face, naš je tipografski arsenal bio ograničen na lokalne fontove, gdje su jedini dostupni fontovi bili oni koji su bili unaprijed učitani na računalo krajnjeg korisnika. Te fontove nazivamo "sigurnim na webu" jer preglednik ne treba ništa preuzimati kako bi se prikazali.
Tada je došlo @font-facepravilo koje je web dizajnerima i front-end programerima dalo nove tipografske moći za razliku od ikad prije. Omogućio nam je upload datoteka s fontovima na poslužitelj i upisivanje skupa pravila u naše tablice stilova koji imenuju font i govore pregledniku gdje da preuzme datoteke. Također je iznjedrio usluge poput Google Fontova koji su masovne fontove donijeli širokim masama. Konačno, srušena je glavna prepreka koja je odvojila web dizajn od dizajna tiska!
Međutim, prilagođeni fontovi dolazili su (i nastavljaju se pojavljivati) uz cijenu. Datoteke fontova mogu biti velike, a dodatno vrijeme za preuzimanje datoteka može usporiti rad web mjesta, posebno za uređaje na sporijoj mrežnoj vezi. Dodatni trošak za korisnike na ograničenim podatkovnim paketima također je postao faktor.
Još jedna posebna briga koja se pojavila kod prilagođenih fontova jest ono što je nazvano "bljesak neuglađenog teksta" ili ukratko FOUT. Preglednici bi zadali prikaz sistemskog fonta dok čekaju preuzimanje prilagođenog fonta. To je omogućilo brže učitavanje web stranica, ali izazvalo je zabrinutost među web dizajnerima koji su ovo smatrali otmicom korisničkog iskustva i lažnim predstavljanjem namjeravanog dizajna. Web-preglednici danas uglavnom skrivaju tekst dok se ne preuzme prilagođeni font, što sada nazivamo "bljeskom nevidljivog teksta" ili FOIT.
Ni FOUT ni FOIT nisu sjajni. Imamo načine za optimizaciju izvedbe prilagođenih fontova kako bismo olakšali učinke. Međutim, sada font-displaypregledniku moramo reći da li više volimo FOUT, FOIT ili čak nešto između.
Testiranje podrške
Zanimljivo upozorenje koje je primijetio Šime Vidas:
CSS prikaz fonta je
@font-facedeskriptor, a ne svojstvo, pa se njegova podrška u pregledniku ne može testirati s upitima značajki (CSS@supportspravilo i CSS.supports API).
Više informacija
- CSS modul kontrola prikazivanja fontova Razina 1 Specifikacija: Nacrt specifikacije za svojstvo.
font-displayza mase: Jeremy Wagner upoznao nas je s imanjem ovdje na CSS-trikovima.- Korištenje
@font-face: Sveobuhvatno objašnjenje pravila i najbolje prakse za njegovo korištenje. - Stog sistemskih fontova: Isječak za potpuno odricanje prilagođenih fontova i oslanja se isključivo na korisničke sistemske fontove.
- Kontrola izvedbe fonta pomoću
font-display: Googleov fini opis teme.
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 60 | 58 | Ne | 79 | 11.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11,3-11,4 |