Šrifto rodymas - CSS-gudrybės

Turinys

Į font-displaynuosavybės apibrėžia, kaip šrifto failai įkelti ir rodomi naršyklėje. Jis taikomas @font-facetaisyklei, kuri stiliaus lape apibrėžia pasirinktinius šriftus.

@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 */ )

Vertybės

font-displayNuosavybė priima penkis reikšmes:

  • auto(numatytasis nustatymas): leidžia naršyklei naudoti numatytąjį įkėlimo metodą, kuris dažniausiai yra panašus į blockvertę.
  • block: Nurodo naršyklei trumpai paslėpti tekstą, kol šriftas bus visiškai atsisiųstas. Tiksliau, naršyklė atkreipia tekstą su nematoma vietos rezervavimo ženklu, tada, kai tik jis įkeliamas, pakeičia jį pasirinktiniu šrifto veidu. Tai taip pat žinoma kaip „nematomo teksto blykstė“ arba FOIT.
  • swap: Nurodo naršyklei naudoti atsarginį šriftą tekstui rodyti, kol pasirinktinis šriftas bus visiškai atsisiųstas. Tai taip pat žinoma kaip „nestiliuoto teksto blykstė“ arba „FOUT“.
  • fallback: Veikia kaip kompromisas tarp autoir swapvertybių. Naršyklė slėps tekstą maždaug 100 ms ir, jei šriftas dar nebuvo atsisiųstas, naudos atsarginį tekstą. Atsisiuntus jis pasikeis naujuoju šriftu, bet tik per trumpą apsikeitimo laikotarpį (tikriausiai 3 sekundes).
  • optional: Panašu fallback, kad ši vertė nurodo naršyklei iš pradžių slėpti tekstą, tada pereiti prie atsarginio šrifto, kol bus galima naudoti pasirinktinį šriftą. Tačiau ši reikšmė taip pat leidžia naršyklei nustatyti, ar pasirinktinis šriftas apskritai naudojamas, naudodamas vartotojo ryšio greitį kaip lemiamą veiksnį, kai lėtesni ryšiai rečiau gauna pasirinktinį šriftą.

Štai dar vienas būdas galvoti apie juos

Blokavimo laikotarpis Apsikeitimo laikotarpis
blokuoti Trumpas Begalinis
sukeisti Nė vienas Begalinis
atsitraukti Itin trumpas Trumpas
neprivaloma Itin trumpas Nė vienas

Kodėl mums reikia font-display

Prieš mums plačiai palaikant @font-face, mūsų tipografinis arsenalas apsiribojo vietiniais šriftais, kur vieninteliai galimi šriftai buvo iš anksto įkelti į galutinio vartotojo kompiuterį. Šiuos šriftus mes vadiname „saugiais žiniatinkliui“, nes naršyklei nereikia nieko atsisiųsti, kad juos būtų galima pateikti.

Tada atsirado @font-facetaisyklė, kuri suteikė interneto dizaineriams ir išorinių kūrėjų naujoms spausdinimo galimybėms, skirtingai nei bet kada anksčiau. Tai leido mums įkelti šriftų failus į serverį ir į savo stiliaus lenteles įrašyti taisyklių rinkinį, kuriame įvardijamas šriftas ir nurodoma naršyklei, kur atsisiųsti failus. Taip pat atsirado tokių paslaugų kaip „Google Fonts“, kurios pritaikė šriftus masėms. Galiausiai buvo nuversta pagrindinė kliūtis, atskyrusi interneto dizainą nuo spaudos dizaino!

Tačiau užsakomieji šriftai kainavo (ir toliau). Šrifto failai gali būti dideli, o papildomas failų atsisiuntimo laikas gali sulėtinti svetainės veikimą, ypač įrenginiams, turintiems lėtesnį tinklo ryšį. Veiksniu tapo ir papildomos išlaidos vartotojams už ribotus duomenų planus.

Dar vienas ypatingas rūpestis, kuris kilo naudojant pasirinktinius šriftus, yra tai, kas buvo pavadinta „nestiliuoto teksto blykste“ arba trumpai - „FOUT“. Naršyklės pagal numatytuosius nustatymus rodys sistemos šriftą, kol laukia, kol bus atsisiųstas pasirinktinis šriftas. Tai leido tinklalapius įkelti greičiau, tačiau sukėlė nerimą tarp interneto dizainerių, kurie tai suprato kaip užgrobiantį vartotojo patirtį ir neteisingai pateikiantį numatytą dizainą. Šiandien žiniatinklio naršyklės paprastai slepia tekstą, kol atsisiunčiamas pasirinktinis šriftas, kurį dabar vadiname „nematomo teksto blykste“ arba FOIT.

Nei FOUT, nei FOIT nėra puiku. Turime būdų, kaip optimizuoti pasirinktinių šriftų našumą, kad būtų lengviau palengvinti efektus. Tačiau dabar mes turime font-displaynaršyklei pasakyti, ar mums labiau patinka FOUT, FOIT ar net kažkas tarp jų.

Bandymas palaikyti

Įdomi Šime Vido išlyga:

CSS šrifto ekranas yra @font-facedeskriptorius, o ne ypatybė, todėl jo palaikymo naršyklėje negalima išbandyti naudojant funkcijų užklausas (CSS @supportstaisyklė ir CSS.palaikymo API).

Daugiau informacijos

  • CSS šriftų atvaizdavimo valdymo modulio 1 lygio specifikacija: ypatybės specifikacijos projektas.
  • font-display masėms: Jeremy Wagneris supažindino mus su čia esančiu turtu CSS-Tricks.
  • Naudojimas @font-face: išsamus taisyklės ir geriausios praktikos, kaip ją naudoti, paaiškinimas.
  • Sistemos šriftų krūva: fragmentas, skirtas visiškai atsisakyti pasirinktinių šriftų ir pasikliauti tik vartotojo sistemos šriftais.
  • Šrifto našumo kontrolė naudojant font-display: „Google“ puikiai parašė temą.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
60 58 Ne 79 11.1

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 11.3-11.4

Įdomios straipsniai...