Bli kjent med Google Web Font

Vil du ha tilgang til over 530 gratis nettstedsfamilier? Bra, da må du vite om Google Web Font. det er en del av Google Developer API og gir tilgang til høykvalitets webfonter som du kan bruke i websidedokumentene dine. Ikke bare kan du bruke skrifttypene på nettsteder eller blogger, men de kan også lastes ned til PC-en eller serveren din for bruk i lokale programmer, for eksempel desktop-publisering eller bildeprogrammer.

Flere fordeler med å bruke Google Web Fonts inkluderer et bredt utvalg av åpen kildekode-fonter av høy kvalitet, kompatibilitet med omtrent alle nettlesere og mobilenheter, og en enkel implementering.

Google Web Fonts API er kompatibelt med nettleserne nedenfor, og hvis du fortsatt har noen brukere som nyter en tidlig versjon av IE, kan det være lurt å hjelpe dem med å oppgradere.

  • Google Chrome: versjon 4.249.4+
  • Mozilla Firefox: versjon: 3.5+
  • Apple Safari: versjon 3.1+
  • Opera: versjon 10.5+
  • Microsoft Internet Explorer: versjon 6+

Google Web Fonts API fungerer konsekvent på et stort flertall av dagens mobile operativsystemer, inkludert Android 2.2+ og iOS 4.2+ (iPhone, iPad, iPod); støtte for tidligere iOS-versjoner er imidlertid begrenset.

Bruke Google Web Fonts API

# 1 Velg skrifttypen du ønsker å bruke fra Google Web Fonts- biblioteket.

I dette tilfellet valgte jeg Open Sans. To alternativer inkluderer enten å velge Legg til innsamlingsknapp og velg deretter Bruk fra bunnteksten nederst på siden, eller åpne "Hurtig bruk" -ikonet, som også får deg dit (vist til høyre).

# 2 På "Rask bruk" -siden kan du velge hvilken stil du vil ha. Du kan velge en eller alle, men ved å bruke for mange fontstiler kan du redusere gjengivelsen av websider, så husk bare å velge stilene du faktisk bruker. I Open Sans- demonstrasjonen er standardstilen Normal 400, som vist i figur C nedenfor.

Figur C

# 3 Velg koden du vil legge til på nettstedet ditt med tre alternativer: Standard, @import og JavaScript. For å legge inn skrifttypen din på websiden din, bare kopier du den valgte koden til HTML-dokumentet. I dette tilfellet valgte jeg standardkoden for stilarklenken som vist i figur D nedenfor.

Figur D

Og lagt til HTML-dokumentet vises som sådan:

Sammen med den lokale stilarklenkehenvisningen:

# 4 Integrer skrifttypen i CSS-stilarket ditt for alt innhold du vil bli assosiert med den aktuelle skriften.

Eksemplet på CSS-kodebiten vises nedenfor:

 h1, p {font-family: 'Open Sans', sans-serif; } 

Når det live HTML-dokumentet vises i nettleseren, vil det trekke ned en kopi av Google-stilarket slik at stilene blir gjengitt slik du valgte dem under Rask bruk-trinnene ovenfor. I dette tilfellet vises Google CSS-koden for Open Sans- font med normal styling og skriftvekt 400:

 @ font-face { 
 font-family: 'Open Sans'; 
 font-stil: normal; 
 fontvekt: 400; 
 src: local ('Open Sans'), local ('OpenSans'), url (http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format ('woff'); 
 } 
Demonstrasjonens HTML-utgang vises i figur E :

Figur E

Avanserte teknikker

Google WebFont Loader er JavaScript-biblioteket som gir deg mer kontroll for å laste inn Google Fonts API, og lar deg bruke flere leverandører av webtype, som ble utviklet sammen med Typekit. Bruk av WebFont Loader krever noe kunnskap om JavaScript; Hvis du vil inkorporere disse funksjonene, bør du gå gjennom dokumentasjonen for implementering av WebFont Loader-konfigurasjoner; Imidlertid vil jeg gjennomgå de avanserte teknikkene i et annet segment snart. HTML- og CSS-filen er tilgjengelig for nedlasting.

© Copyright 2021 | pepebotifarra.com