Prikaz pisave - CSS-triki

Anonim

Na font-displaylastnine opredeljuje, kako se pisave datotek naloženi in so prikazane v brskalniku. Uporablja se za @font-facepravilo, ki v slogovnem listu določa pisave po meri.

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

Vrednote

font-displayPremoženje sprejme pet vrednosti:

  • auto(privzeto): brskalniku dovoli uporabo privzete metode za nalaganje, ki je najpogosteje podobna blockvrednosti.
  • block: Brskalniku naroči, naj besedilo na kratko skrije, dokler se pisava ne prenese v celoti. Natančneje, brskalnik besedilo nariše z nevidnim ogradnim znakom, nato pa ga takoj, ko se naloži, zamenja z obrazom pisave po meri. To je znano tudi kot "blisk nevidnega besedila" ali FOIT.
  • swap: Brskalniku naroči, naj za prikaz besedila uporablja nadomestno pisavo, dokler se pisava po meri ne prenese v celoti. To je znano tudi kot "blisk nestiliziranega besedila" ali FOUT.
  • fallback: Deluje kot kompromis med vrednostmi autoin swap. Brskalnik bo besedilo skrival približno 100 ms in, če pisava še ni bila prenesena, bo uporabil nadomestno besedilo. Po prenosu se bo zamenjal za novo pisavo, vendar le v kratkem obdobju zamenjave (verjetno 3 sekunde).
  • optional: Tako kot fallbackta vrednost brskalniku sporoči, da najprej skriva besedilo, nato pa preide na nadomestno pisavo, dokler pisava po meri ni na voljo za uporabo. Vendar ta vrednost omogoča tudi brskalniku, da ugotovi, ali se pisava po meri sploh sploh uporablja, pri čemer je uporabnikova hitrost povezave odločilni dejavnik, kadar je počasnejša povezava manj verjetna, da bo prejela pisavo po meri.

Tu je še en način razmišljanja o njih

Blok Obdobje Zamenjalno obdobje
blok Kratek Neskončno
zamenjati Nobenega Neskončno
pasti nazaj Izredno kratek Kratek
neobvezno Izredno kratek Nobenega

Zakaj potrebujemo font-display

Preden smo imeli široko podporo @font-face, je bil naš tipografski arzenal omejen na lokalne pisave, kjer so bile na voljo le tiste, ki so bile vnaprej naložene v računalnik končnega uporabnika. Tem pisavam pravimo "varne na spletu", ker brskalniku ni treba ničesar prenesti, da bi jih lahko upodobili.

Nato je prišlo @font-facepravilo, ki je spletnim oblikovalcem in front-end razvijalcem dalo nove tipografske moči, kot so bile kdaj koli prej. Omogočil nam je, da datoteke pisav naložimo na strežnik in v naše sloge napišemo pravila, ki poimenujejo pisavo in brskalniku povedo, kam naj prenese datoteke. Prav tako so nastale storitve, kot so Google Fonts, ki so množice prinesle pisave po meri. Končno je bila strmoglavljena glavna ovira, ki je ločila spletno oblikovanje od tiskanega!

Vendar pa so pisave po meri prišle (in še vedno prihajajo) z doplačilom. Datoteke pisav so lahko velike, dodaten čas za prenos datotek pa lahko upočasni delovanje spletnega mesta, zlasti pri napravah s počasnejšo omrežno povezavo. Dejavniki so postali tudi dodatni stroški za uporabnike v okviru omejenih podatkovnih paketov.

Druga posebna skrb, ki se je pojavila pri pisavah po meri, je tisto, kar so poimenovali "blisk nerazporejenega besedila" ali na kratko FOUT. Brskalniki privzeto prikazujejo sistemsko pisavo, medtem ko čakajo na prenos pisave po meri. To je omogočilo hitrejše nalaganje spletnih strani, vendar je med spletnimi oblikovalci vzbudilo zaskrbljenost, ki je na to gledalo kot na ugrabitev uporabniške izkušnje in napačno predstavljanje predvidene zasnove. Spletni brskalniki danes običajno skrivajo besedilo, dokler se ne prenese pisava po meri, ki jo zdaj imenujemo »blisk nevidnega besedila« ali FOIT.

Niti FOUT niti FOIT ni super. Obstajajo načini za optimizacijo delovanja pisav po meri, da si olajšamo učinke. Zdaj pa moramo font-displaybrskalniku povedati, ali imamo raje FOUT, FOIT ali celo kaj vmes.

Testiranje za podporo

Zanimivo opozorilo, ki ga je opazil Šime Vidas:

Prikaz pisave CSS je @font-facedeskriptor in ni lastnost, zato njegove podpore v brskalniku ni mogoče preizkusiti s poizvedbami funkcij ( @supportspravilo CSS in API za CSS.supports).

Več informacij

  • Modul za upravljanje upodabljanja pisave CSS nivo 1 Specifikacija: Osnutek specifikacije za lastnost.
  • font-display za množice: Jeremy Wagner nam je predstavil nepremičnino tukaj na CSS-triki.
  • Uporaba @font-face: Izčrpna razlaga pravila in najboljše prakse za uporabo.
  • Stack sistemskih pisav: delček za vse odpovedi pisav po meri in se zanaša izključno na uporabniške sistemske pisave.
  • Nadzor delovanja pisave z font-display: Googlov lep opis teme.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
60 58 Ne 79 11.1

Mobilni / tablični računalnik

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