Základy rozhrania Google Font API - Triky CSS

Anonim

Odkaz na súbory CSS

V podstate hotlinkujete priamo so súbormi CSS na Google.com. Prostredníctvom parametrov adresy URL môžete určiť, ktoré písma chcete a aké variácie týchto typov písma máte.

…
Nápad: Ak sa chcete vyhnúť ďalšej požiadavke na sieť, otvorte danú šablónu štýlov a skopírujte a prilepte obsah @ font-face do hlavnej šablóny so štýlmi. Ale pozor: Google robí nejaké čuchanie User Agentov, aby podľa potreby niekedy slúžil rôznym veciam na rôzne zariadenia. Ak to urobíte týmto spôsobom, nebudete z toho mať úžitok.

CSS

Vo svojom CSS potom môžete určiť tieto nové písma podľa názvu na ľubovoľnom prvku, ktorý chcete použiť.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Namiesto odkazov na CSS môžete použiť JavaScript FontLoader. Má výhody, ako napríklad kontrolu Flash of Unstyled Text (FOUT), a tiež nevýhody, ako napríklad skutočnosť, že sa písma nebudú načítavať používateľom s vypnutým jazykom JavaScript.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; )

Tieto názvy tried, napr. Sa .wf-loadingpoužijú na prvok. Takže si všimnite, že keď sa písma „načítajú“, môžete použiť tento názov triedy na skrytie textu. Keď sa potom zobrazia, znova ich zviditeľnite. Takto sa ovláda FOUT.