Grunnleggende om Google Font API - CSS-triks

Anonim

Lenke til CSS-filer

Du kobler i hovedsak direkte til CSS-filer på Google.com. Gjennom URL-parametere spesifiserer du hvilke skrifter du vil ha, og hvilke varianter av disse skriftene.

…
Idé: Du kan unngå en ekstra nettverksforespørsel ved å åpne det stilarket og kopiere og lime inn @ font-face ting i hovedformatet ditt. Men vær forsiktig: Google gjør noen brukeragenter sniffende ting for å av og til servere forskjellige ting til forskjellige enheter etter behov. Du vil ikke dra nytte av det hvis du gjør det på denne måten.

CSS

I CSS kan du deretter spesifisere disse nye skriftene etter navn på ethvert element du ønsker å bruke dem.

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

FontLoader

Du kan bruke FontLoader JavaScript i stedet for å koble til CSS. Det har fordeler, som å kontrollere Flash of Unstyled Text (FOUT), og også ulemper, som det faktum at skriftene ikke lastes inn for brukere med JavaScript av.

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

Disse klasse navnene, for eksempel .wf-loadingblir brukt på elementet. Så legg merke til når skriftene "lastes inn", du kan bruke dette klassenavnet til å skjule teksten. Så når de vises, gjør dem synlige igjen. Slik styres FOUT.