K font-displayvlastnictví definuje, jak jsou soubory písem načte a zobrazí v prohlížeči. Aplikuje se na @font-facepravidlo, které definuje vlastní písma v šabloně stylů.
@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
Ubytovací zařízení font-displaypřijímá pět hodnot:
auto(výchozí): Umožňuje prohlížeči použít jeho výchozí metodu načítání, která je nejčastěji podobnáblockhodnotě.block: Dává pokyn prohlížeči, aby krátce skryl text, dokud se písmo plně nestáhne. Přesněji, prohlížeč nakreslí text pomocí neviditelného zástupného symbolu a poté jej načte s vlastním obličejem písma, jakmile se načte. Toto se také nazývá „záblesk neviditelného textu“ nebo FOIT.swap: Dává pokyn prohlížeči, aby pro zobrazení textu použil záložní písmo, dokud se vlastní písmo plně nestáhne. Toto se také označuje jako „záblesk nestylovaného textu“ nebo FOUT.fallback: Funguje jako kompromis mezi hodnotamiautoaswap. Prohlížeč skryje text na přibližně 100 ms a pokud písmo dosud nebylo staženo, použije záložní text. Po stažení se přepne na nové písmo, ale pouze během krátké doby výměny (pravděpodobně 3 sekundy).optional: Stejně jakofallbacktato hodnota říká prohlížeči, aby nejprve skryl text a poté přešel na záložní písmo, dokud nebude k dispozici vlastní písmo. Tato hodnota však také umožňuje prohlížeči určit, zda se vlastní písmo vůbec vůbec používá, a to pomocí rychlosti připojení uživatele jako určujícího faktoru, kde je pomalejší připojení méně pravděpodobné, že vlastní písmo přijme.
Tady je další způsob, jak o nich přemýšlet
| Blokové období | Výměnné období | |
|---|---|---|
| blok | Krátký | Nekonečný |
| vyměnit | Žádný | Nekonečný |
| ustoupit | Extrémně krátký | Krátký |
| volitelný | Extrémně krátký | Žádný |
Proč potřebujeme font-display
Než jsme měli rozsáhlou podporu @font-face, náš typografický arzenál byl omezen na místní písma, kde jediná dostupná písma byla ta, která byla předinstalována v počítači koncového uživatele. Tato písma označujeme jako „bezpečná pro web“, protože prohlížeč nemusí pro jejich vykreslení nic stahovat.
Pak přišlo @font-facepravidlo, které poskytlo webovým návrhářům a front-endovým vývojářům nové typografické schopnosti, jaké nikdy předtím nebyly . Umožnilo nám to nahrát soubory písem na server a zapsat do našich seznamů stylů soubor pravidel, která pojmenují písmo a řeknou prohlížeči, kam soubory stáhnout. Vznikly z toho také služby, jako jsou Google Fonts, které masám přinesly vlastní písma. Nakonec byla svržena hlavní překážka, která odděluje webový design od tištěného!
Vlastní písma však přišla (a nadále přichází) za cenu. Soubory písem mohou být velké a čas navíc ke stažení souborů může zpomalit výkon webu, zejména u zařízení s pomalejším připojením k síti. Faktorem se staly také dodatečné náklady pro uživatele omezených datových tarifů.
Dalším zvláštním problémem, který vznikl s vlastními písmy, je to, čemu se říkalo „záblesk nestylovaného textu“ nebo zkráceně FOUT. Prohlížeče by standardně zobrazovaly systémové písmo během čekání na stažení vlastního písma. To umožnilo rychlejší načítání webových stránek, ale vyvolalo obavy mezi webovými designéry, kteří to považovali za únos uživatelského prostředí a zkreslování zamýšleného designu. Webové prohlížeče dnes obecně skryjí text, dokud se nestáhne vlastní písmo, které nyní označujeme jako „záblesk neviditelného textu“ nebo FOIT.
FOUT ani FOIT nejsou skvělé. Máme způsoby, jak optimalizovat výkon vlastních písem, abychom usnadnili efekty. Nyní však musíme font-displayprohlížeči sdělit, zda upřednostňujeme FOUT, FOIT nebo dokonce něco mezi tím.
Testování podpory
Zajímavé upozornění, které poznamenal Šime Vidas:
CSS font-display je
@font-facedeskriptor a nikoli vlastnost, takže jeho podporu v prohlížeči nelze otestovat pomocí dotazů na funkce (@supportspravidlo CSS a CSS.supports API).
Více informací
- Modul CSS pro ovládání vykreslování písem úrovně 1 Specifikace: Návrh specifikace pro vlastnost.
font-displaypro masy: Jeremy Wagner nám představil nemovitost zde na CSS-Tricks.- Použití
@font-face: Komplexní vysvětlení pravidla a osvědčené postupy pro jeho použití. - Zásobník systémových písem: Úryvek pro úplné opuštění vlastních písem a spoléhání se výhradně na systémová písma uživatele.
- Řízení výkonu písma pomocí
font-display: Jemný zápis k tématu společností Google.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 60 | 58 | Ne | 79 | 11.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |