Google Font API: n perusteet - CSS-temppuja

Anonim

Linkki CSS-tiedostoihin

Teet pikalinkin suoraan CSS-tiedostoihin Google.comissa. URL-parametrien avulla määrität haluamasi fontit ja mitkä fonttien muunnelmat.

…
Idea: Voit välttää ylimääräisen verkkopyynnön avaamalla kyseisen tyylitaulukon ja kopioimalla ja liittämällä @ font-face -asiat päätyylitaulukkoon. Mutta ole varovainen: Google nuuskii joitain User Agent -tuotteita palvellakseen joskus erilaisia ​​asioita eri laitteille tarpeen mukaan. Et hyöty siitä, jos se tehdään tällä tavalla.

CSS

CSS: ssä voit sitten määrittää nämä uudet fontit nimen mukaan mille tahansa elementille, jota haluat käyttää.

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

FontLoader

Voit käyttää FontLoader-JavaScriptiä CSS: ään linkittämisen sijaan. Sillä on etuja, kuten tyylittämättömän tekstin Flashin (FOUT) hallinta, ja myös haittoja, kuten se, että fontit eivät lataudu käyttäjille, joiden JavaScript on pois käytöstä.

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

Nuo luokan nimiä, esimerkiksi .wf-loadingoteta lukuun elementtiin. Joten huomaa, kun fontit “latautuvat”, voit piilottaa tekstin kyseisen luokan nimellä. Kun ne näytetään, tee ne taas näkyviksi. Näin FOUTia hallitaan.