Táto font-displayvlastnosť definuje, ako sa načítajú a zobrazujú súbory fontov prehľadávačom. Aplikuje sa na @font-facepravidlo, ktoré definuje vlastné písma v šablóne so štýlmi.
@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 */ )Hodnoty
Toto font-displayubytovacie zariadenie akceptuje päť hodnôt:
auto(predvolené): Umožňuje prehliadaču použiť jeho predvolenú metódu načítania, ktorá je najčastejšie podobnáblockhodnote.block: Dáva pokyn prehľadávaču, aby krátko skryl text, kým sa písmo úplne nestiahne. Presnejšie, prehliadač nakreslí text neviditeľným zástupným znakom a potom ho po načítaní zamení za vlastnú tvár písma. Toto je tiež známe ako „záblesk neviditeľného textu“ alebo FOIT.swap: Dáva pokyn prehľadávaču, aby na zobrazenie textu používal záložné písmo, kým sa vlastné písmo úplne nestiahne. Toto je tiež známe ako „záblesk neštýlovaného textu“ alebo FOUT.fallback: Funguje ako kompromis medzi hodnotamiautoaswap. Prehliadač skryje text na približne 100 ms a ak písmo ešte nebolo stiahnuté, použije záložný text. Po stiahnutí sa zmení na nové písmo, ale iba počas krátkeho obdobia výmeny (pravdepodobne 3 sekundy).optional:fallbackTáto hodnota informuje prehliadač, aby pôvodne text skryl, a potom prešiel na záložné písmo, kým nebude k dispozícii vlastné písmo. Táto hodnota však tiež umožňuje prehliadaču určiť, či sa vlastné písmo vôbec používa, a to pomocou rýchlosti pripojenia používateľa ako určujúceho faktora, pri ktorom je pomalšie pripojenie k vlastnému písmu pravdepodobnejšie.
Je tu ďalší spôsob, ako o nich premýšľať
| Blokové obdobie | Obdobie výmeny | |
|---|---|---|
| blokovať | Krátky | Nekonečné |
| vymeniť | Žiadne | Nekonečné |
| záložný | Mimoriadne krátky | Krátky |
| voliteľné | Mimoriadne krátky | Žiadne |
Prečo potrebujeme font-display
Predtým, ako sme mali rozsiahlu podporu @font-face, náš typografický arzenál bol obmedzený na miestne písma, kde jediné dostupné písma boli tie, ktoré boli predinštalované v počítači koncového používateľa. Tieto písma označujeme ako „bezpečné pre web“, pretože prehliadač nemusí na ich vykreslenie nič sťahovať.
Potom prišlo @font-facepravidlo, ktoré dalo webovým dizajnérom a front-endovým vývojárom nové typografické sily, aké tu ešte neboli. Umožnilo nám to nahrať súbory písma na server a zapísať do našich tabuliek štýlov sadu pravidiel, ktoré pomenujú písmo a povedia prehľadávaču, kam súbory majú sťahovať. Takisto vznikli služby ako Google Fonts, ktoré priniesli vlastné písma pre široké masy. Nakoniec došlo k zvrhnutiu hlavnej prekážky, ktorá oddelila webový dizajn od tlačeného!
Vlastné písma však prichádzali (a naďalej prichádzajú) za cenu. Súbory písma môžu byť veľké a čas potrebný na ich stiahnutie môže spomaliť výkonnosť webu, najmä v prípade zariadení s pomalším sieťovým pripojením. Faktorom sa stali aj dodatočné náklady pre používateľov obmedzených dátových plánov.
Ďalšou zvláštnou obavou, ktorá vznikla pri vlastných písmach, je to, čo sa dalo nazvať „záblesk neštýlovaného textu“ alebo skrátene FOUT. Prehliadače by predvolene zobrazovali systémové písmo počas čakania na stiahnutie vlastného písma. To umožnilo rýchlejšie načítanie webových stránok, ale vyvolalo to obavy medzi webovými dizajnérmi, ktorí to považovali za únos používateľovho prostredia a skreslenie zamýšľaného dizajnu. Webové prehliadače dnes všeobecne skryjú text, kým sa nestiahne vlastné písmo, ktoré dnes označujeme ako „záblesk neviditeľného textu“ alebo FOIT.
FOUT ani FOIT nie sú super. Máme spôsoby, ako optimalizovať výkon vlastných písiem, aby sme uľahčili efekty. Teraz však musíme font-displayprehliadaču povedať, či uprednostňujeme FOUT, FOIT alebo dokonca niečo medzi tým.
Testovanie podpory
Zaujímavá poznámka, ktorú poznamenal Šime Vidas:
Zobrazenie písma CSS je
@font-facedeskriptor a nie vlastnosť, takže jeho podpora v prehliadači nemôže byť testovaná pomocou dotazov na funkcie (@supportspravidlo CSS a CSS.supports API).
Viac informácií
- Modul ovládacích prvkov vykreslenia písma CSS úrovne 1 Špecifikácia: Návrh špecifikácie vlastnosti.
font-displaypre masy: Jeremy Wagner nás zoznámil s majetkom tu na CSS-Tricks.- Použitie
@font-face: Komplexné vysvetlenie pravidla a osvedčené postupy jeho použitia. - Zásobník systémových fontov: Útržok, ktorý slúži na úplné opustenie vlastných písiem a spolieha sa iba na systémové písma používateľa.
- Ovládanie výkonu písma pomocou
font-display: Jemný popis témy Google.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 60 | 58 | Nie | 79 | 11.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |