font-displayVara määratleb, kuidas fondifailid laaditakse ja kuvatakse brauseri. Seda rakendatakse @font-facereeglile, mis määratleb stiililehel kohandatud fondid.
@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 */ )Väärtused
font-displayVara nõustub viie väärtused:
auto(vaikimisi): lubab brauseril laadida laadimiseks vaikemeetodit, mis on enamastiblockväärtusega sarnane .block: Käsib brauseril teksti lühidalt peita, kuni font on täielikult alla laaditud. Täpsemalt joonistab brauser teksti nähtamatu kohatäitjaga ja vahetab selle kohe laadimisel kohandatud fondinäoga. Seda tuntakse ka kui “nähtamatu teksti välku” ehk FOIT.swap: Käsib brauseril kasutada teksti kuvamiseks varufonti, kuni kohandatud font on täielikult alla laaditud. Seda tuntakse ka kui "stiilivälise teksti välku" või FOUT.fallback: Toimib kompromissina väärtusteautoja vahelswap. Brauser varjab teksti umbes 100 ms ja kui fondi pole veel alla laaditud, kasutab varuteksti. See vahetatakse pärast allalaadimist uue fondi vastu, kuid ainult lühikese vahetusperioodi jooksul (tõenäoliselt 3 sekundit).optional: Sarnaseltfallbackütleb see väärtus brauserile algselt teksti peitmise ja seejärel ülemineku tagavarafondile, kuni kohandatud font on saadaval. Kuid see väärtus võimaldab ka brauseril kindlaks teha, kas kohandatud fonti üldse kasutatakse, kasutades määravaks teguriks kasutaja ühenduse kiirust, kus aeglasemad ühendused saavad vähem kohandatud fondi.
Siin on veel üks viis nende üle mõelda
| Blokeerimisperiood | Vahetusperiood | |
|---|---|---|
| blokeerida | Lühike | Lõputu |
| vahetada | Puudub | Lõputu |
| varukoopia | Äärmiselt lühike | Lühike |
| valikuline | Äärmiselt lühike | Puudub |
Miks me vajame font-display
Enne kui meil oli laialdane tugi @font-face, piirdus meie tüpograafiline arsenal kohalike fontidega, kus ainsad saadaolevad fondid olid need, mis olid lõppkasutaja arvutisse eelnevalt laaditud. Nimetame neid veebiturvalisteks fontideks, kuna brauseril pole nende renderdamiseks vaja midagi alla laadida.
Seejärel tuli @font-facereegel, mis andis veebidisaineritele ja otsearendajatele uued tüpograafilised volitused erinevalt iial varem. See võimaldas meil fontifaile serverisse üles laadida ja kirjutada oma stiililehtedele reeglistik, mis nimetab fondi ja ütleb brauserile, kust failid alla laadida. See tekitas ka selliseid teenuseid nagu Google Fonts, mis tõi kohandatud fondid massidesse. Lõpuks oli kukutatud suur takistus, mis eraldas veebidisaini trükikujundusest!
Kuid kohandatud fondid tulid (ja jätkuvad ka edaspidi) oma hinnaga. Fontifailid võivad olla suured ja lisaaeg failide allalaadimiseks võib saidi toimimist aeglustada, eriti aeglasema võrguühendusega seadmete puhul. Teguriks sai ka piiratud andmesidepakettide lisakulu kasutajatele.
Veel üks eriline mure, mis kohandatud fontide puhul tekkis, on see, mida nimetati lühidalt „stiilita teksti välguks” või FOUT. Brauserid kuvavad vaikimisi süsteemi fondi, oodates kohandatud fondi allalaadimist. See võimaldas veebilehtedel kiiremini laadida, kuid tekitas muret veebidisainerite seas, kes pidasid seda kasutajakogemuse kaaperdamiseks ja kavandatud kujunduse vääraks esitamiseks. Veebibrauserid peidavad tänapäeval teksti tavaliselt seni, kuni alla laaditakse kohandatud font, mida me nüüd nimetame „nähtamatu teksti välguks” või FOIT.
Ei FOUT ega FOIT pole toredad. Mõjude hõlbustamiseks on meil võimalusi kohandatud fontide jõudluse optimeerimiseks. Kuid nüüd peame font-displaybrauserile ütlema, kas eelistame FOUT, FOIT või isegi midagi vahepealset.
Toetuse testimine
Šime Vidas märkis huvitava hoiatuse:
CSS-font-display on
@font-facedeskriptor ja mitte omadus, seetõttu ei saa selle tuge brauseris testida funktsioonipäringutega (CSS-i@supportsreegel ja CSS.-i toetav API).
Rohkem informatsiooni
- CSS-i fondi renderdamise juhtimismoodul 1. taseme spetsifikatsioon: atribuudi spetsifikatsiooni mustand.
font-displaymassidele: Jeremy Wagner tutvustas meile siinse vara CSS-Tricksi kaudu.- Kasutamine
@font-face: reegli ja selle kasutamise parimate tavade põhjalik selgitus. - Süsteemi fontide virn: Jupp kohandatud fontide loobumiseks ja tugineb ainult kasutaja süsteemi fontidele.
- Fondi jõudluse juhtimine rakendusega
font-display: Google on selle teema kohta korralikult kirjutanud.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 60 | 58 | Ei | 79 | 11.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |