Google Font API põhitõed - CSS-trikid

Anonim

Link CSS-failidele

Sisuliselt linkite otse saidil Google.com otse CSS-failidega. URL-i parameetrite abil saate täpsustada, milliseid fonte soovite ja millised nende fontide variatsioonid.

…
Idee: saate vältida täiendavat võrgutaotlust, avades selle stiililehe ja kopeerides ja kleepides @ font-face kraami oma põhistiililehele. Kuid ole ettevaatlik: Google nuusutab mõnda kasutajaagenti, et vajadusel erinevatele seadmetele erinevaid asju pakkuda. Nii tehes ei saa te sellest kasu.

CSS

Seejärel saate oma CSS-is määrata need uued fondid nimede järgi igale elemendile, mida soovite neid kasutada.

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

FontLoader

CSS-i linkimise asemel võite kasutada FontLoaderi JavaScripti. Sellel on eeliseid, nagu stiili lisamata teksti (FOUT) juhtimine, ja ka puudusi, näiteks asjaolu, et fonte ei laadita kasutajatele, kelle JavaScript on välja lülitatud.

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

Need klasside nimed, nt .wf-loadingrakendatakse elemendile. Nii et pange tähele, kui fondid on laadimisel, saate teksti peitmiseks kasutada selle klassi nime. Siis, kui neid näidatakse, tehke need uuesti nähtavaks. Nii kontrollitakse FOUTi.