Slik bruker du Google WebFont Loader

I et tidligere segment vurderte jeg den raske og enkle måten å integrere Google Web Font på nettsteder. I dette innlegget vil jeg gjennomgå de avanserte funksjonene i Google WebFont Loader, som er JavaScript-biblioteket som gir deg mer kontroll for å laste inn Google Web Fonts API, og lar deg bruke flere leverandører av web-font, som ble utviklet sammen med Typekit. Bruk av WebFont Loader krever noe kunnskap om JavaScript; Imidlertid vil jeg gå gjennom disse avanserte teknikkene i dette segmentet og demonstrere bruken av dem sammen med en nedlasting som er tilgjengelig nederst i dette innlegget.

Oversikt

Google WebFont Loader er en del av Google Hosted Libraries, som er et innholdsdistribusjonsnettverk for Google Developers open source JavaScript-biblioteker. WebFont Loader er for tiden i versjon 1.0.30, og den gir hendelser som blir avfyrt på forskjellige stadier av innlasting av skriftene. Du kan enten skrive din egen kode for å reagere på disse hendelsene, eller bruke CSS-stiler definert av biblioteket for automatisk å gjøre stiler endrede når skriftene er ferdig lastet i nettleseren.

Følgende kodebit blir lagt til delen av webdokumentet ditt for å laste JavaScript og inkluderer den nyeste versjonen, som har den fordelen at det serveres en lengre buffertid og kortere lastetid:

 (funksjon () { 
 var wf = document.createElement ('skript'); 
 wf.src = ('https:' == document.location.protocol? 'https': 'http') + 
 ': //ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
 wf.type = 'text / javascript'; 
 wf.async = 'sant'; 
 var s = document.getElementsByTagName ('script') 0; 
 s.parentNode.insertBefore (wf, s); 
 }) (); 

konfigurasjon

WebFont Loader-konfigurasjonen er definert av en global variabel som heter WebFontConfig når du laster skriptet asynkront, og når du bruker denne tilnærmingen, må du definere den globale variabelen WebFontConfig før koden over som laster WebFont Loader. Bruk konfigurasjonsvariabelen til å spesifisere fontkildeleverandøren og fontfamiliene som skal lastes inn på websidene dine. Eksemplet på kodebiten nedenfor viser konfigurasjonen for å laste inn Google Web Fonts API for 'Aclonica' , 'Acme' og 'Alegreya', tre populære og populære skriftvalg:

 WebFontConfig = { 
 google: {families: 'Aclonica', 'Acme', 'Alegreya' 
 } 
 }; 

Andre skriftleverandører

Alternativer for å laste inn skrifter fra andre leverandører inkluderer følgende leverandøreksempler med WebFontConfig for TypeKit, Ascender Fonts Alive, Fonts.com og Font Deck.

Typekit:

 WebFontConfig = { 
 typekit: { 
 id: 'myKitId' 
 } 
 }; 

Ascender - Fonts Alive:

 WebFontConfig = { 
 ascender: { 
 nøkkel: 'myAscenderKey', 
 familier: 'AscenderSans: fet, bolditalisk, kursiv, vanlig' 
 } 
 }; 

Fonts.com Nettfonter:

 WebFontConfig = { 
 monotype: { 
 projectId: 'YourProjectId' 
 } 
 }; 

Fontdeck:

 WebFontConfig = { 
 fontdeck: { 
 id: 'xxxxx' 
 } 
 }; 

Du kan også spesifisere flere tilbydere av fontkilder i en enkelt konfigurasjonvariabel for webtype med hver kilde atskilt med komma som i følgende eksempel:

 WebFontConfig = { 
 Google: { 
 familier: 'Aclonica', 'Acme', 'Alegreya' 
 } 
 typekit: { 
 id: 'myKitId' 
 } 
 ascender: { 
 nøkkel: 'myAscenderKey', 
 familier: 'AscenderSans: fet, bolditalisk, kursiv, vanlig' 
 } 
 monotype: { 
 projectId: 'YourProjectId' 
 } 
 }; 

Sette alt sammen

Når vi setter sammen det hele, skal JavaScript-kodebiten se ut som dette eksemplet vist nedenfor:

 WebFontConfig = { 
 google: {families: 'Aclonica', 'Acme', 'Alegreya' 
 } 
 }; 
 (funksjon () { 
 var wf = document.createElement ('skript'); 
 wf.src = ('https:' == document.location.protocol? 'https': 'http') + 
 ': //ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
 wf.type = 'text / javascript'; 
 wf.async = 'sant'; 
 var s = document.getElementsByTagName ('script') 0; 
 s.parentNode.insertBefore (wf, s); 
 }) (); 

Bruke stiler

WebFont-lasteren vil behandle skriftene med følgende hendelsesrekkefølge når nettleseren laster ned dem eller setter dem i hurtigbufferen:

  1. Font starter å laste ned spesifisert med klassen .wf-loading
  2. Når skriftene er lastet inn, får de klassen .wf-active
  3. Hvis skrifttyper ikke lastes, får de en klasse .wf-inaktiv

Denne demonstrasjonen inkluderer tre skrifter, derfor vil WebFont Loader utløse hendelser for hver av de tre individuelle skriftene, og for alle skriftene som helhet. WebFont Loader varsler deg om hver av de tre hendelsene som er oppført over på to metoder: den ber om forskjellige CSS-klasser når hver hendelse skjer, og ved å utløse spesifiserte JavaScript-hendelser. For denne demonstrasjonen skal vi trene CSS-klassene som vist i kodebiten nedenfor for hver av lastehendelsene:

 .wf-loading p {font-family: sans-serif; } 
 .wf-inaktiv p {font-family: sans-serif; } 
 .wf-aktiv p {font-family: 'Alegreya', sans-serif; bredde: 400 piksler; margin-venstre: 20 piksler; } 
 .wf-loading h1 {font-family: sans-serif; fontvekt: 400; skriftstørrelse: 24px; } 
 .wf-inaktiv h1 {font-family: sans-serif; fontvekt: 400; skriftstørrelse: 24px; } 
 .wf-aktiv h1 {font-family: 'Aclonica', sans-serif; fontvekt: 400; skriftstørrelse: 24px; } 
 .wf-loading h2 {font-family: sans-serif; fontvekt: 300; skriftstørrelse: 20px; color: # 5E5E5E; } 
 .wf-inaktiv h2 {font-family: sans-serif; fontvekt: 300; skriftstørrelse: 20px; color: # 5E5E5E; } 
 .wf-aktiv h2 {font-family: 'Acme', sans-serif; fontvekt: 300; skriftstørrelse: 20px; color: # 5E5E5E; } 
Den aktive utgangen med HTML-eksempel er vist i figur B nedenfor:

Figur B

Når siden lastes inn, vil du se at overskriftene og avsnitt er gjengitt sans-serif og avsnittet strekker seg også over hele siden, som vist i figur C. Og når klassen .wf-active blir aktiv i nettleseren for hver stil, vil den gjengi den aktive stylingen for hver klasse som opprinnelig vist i figur B ovenfor.

Figur C

Google-modulen

Google-modulen lar deg også spesifisere spesifikke vekter og stiler med WebFont Loader ved å bruke Google Web Fonts API-syntaks. Et eksempel på kodestykket på nettfontskonfigurasjonen nedenfor er en måte å be om skriften Yanone Kaffeesatz fet og Droid Serif kursiv, som vist nedenfor:

 WebFontConfig = { 
 Google: { 
 familier: 'Yanone Kaffeesatz: 700', 'Droid Serif: italic' 
 } 
 }; 

Fungerer på arrangementer

Hvis du ønsker å bli mer grundig med innlasting av hendelser, kan du bruke den asynkrone metoden, der WebFont Loader begynner å laste inn skriftene som er definert i WebFontConfig-objektet så snart skriptet har lastet. Hvis du vil ha enda mer kontroll enn CSS-klassene gir som demonstrert i eksemplene ovenfor, kan du spesifisere dine egne tilbakeringinger som vil bli bedt om når visse hendelser utløses, noe som skjer når lastingen når en bestemt definert tilstand.

Kildekoden for Google WebFont Loader er tilgjengelig fra GitHub-ressursen.

HTML- og CSS-koden demonstrert i denne opplæringen er tilgjengelig for nedlasting.

© Copyright 2020 | mobilegn.com