Tutustu Googlen Web-fontteihin

Haluatko pääsyn yli 530 ilmaiseen verkko fonttiperheeseen? Hyvä, sinun on tiedettävä Google Web Fontsista; se on osa Google Developer -sovellusliittymää ja tarjoaa pääsyn korkealaatuisiin Web-fontteihin, joita voit käyttää verkkosivujen asiakirjoissa. Paitsi, että voit käyttää verkkosivustojesi tai blogiesi fontteja, ne ovat myös ladattavissa tietokoneellesi tai palvelimelle käytettäväksi paikallisissa ohjelmissa, kuten työpöytäjulkaisuissa tai kuvankäsittelyohjelmissa.

Google Web Fonts -sovelluksen useisiin etuihin kuuluu laaja valikoima korkealaatuisia avoimen lähdekoodin fontteja, yhteensopivuus lähes kaikkien selainten ja mobiililaitteiden kanssa ja helppo toteutus.

Google Web Fonts -sovellusliittymä on yhteensopiva alla lueteltujen selainten kanssa, ja jos sinulla on käyttäjiä, jotka nauttivat edelleen IE: n varhaisesta versiosta, kannattaa ehkä auttaa heitä päivittämään.

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

Google Web Fonts -sovellusliittymä toimii johdonmukaisesti suurimmassa osassa nykyisiä mobiili käyttöjärjestelmiä, mukaan lukien Android 2.2+ ja iOS 4.2+ (iPhone, iPad, iPod); vanhojen iOS-versioiden tuki on kuitenkin rajoitettu.

Google Web Fonts -sovellusliittymän käyttäminen

# 1 Valitse käytettävä kirjasin Google Web Fonts -kirjastosta.

Tässä tapauksessa valitsin Open Sans. Kaksi vaihtoehtoa ovat joko Lisää ToCollection-painike ja valitsemalla sitten sivun alareunan alatunnisteesta Käytä tai avaa "Pikakäyttö" -kuvake, joka myös sinne pääsee (näkyy oikealla).

# 2 "Pikakäyttö" -sivulla voit valita haluamasi tyylin. Voit valita yhden tai kaikki, mutta liian monien fonttityylien käyttäminen voi hidastaa verkkosivujen renderointia, joten muista valita vain tyylit, joita käytät. Open Sans -esittelyssä oletustyyli on Normaali 400, kuten alla olevassa kuvassa C esitetään.

Kuvio C

# 3 Valitse verkkosivustoosi lisättävä koodi kolmella vaihtoehdolla: Vakio, @import ja JavaScript. Upottaaksesi kirjasintasi verkkosivullesi, kopioi vain valittu koodi HTML-asiakirjaasi. Tässä tapauksessa valitsin vakiokoodin tyylilinkkille alla olevan kuvan D mukaisesti.

Kuvio D

Ja lisätty HTML-dokumenttiin näkyy sellaisenaan:

Yhdessä paikallisen tyylitaulukkolinkin kanssa:

# 4 Integroi fontti CSS-tyylitaulukkoon kaikelle sisällölle, jonka haluat liittää kyseiseen kirjasimeen.

CSS-koodinpätkä on näytetty alla:

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

Kun elävää HTML-asiakirjaa tarkastellaan selaimessa, se vetää kopion Google-tyylitaulukosta alas, jotta tyylit renderoidaan, kun valitsit ne yllä olevan Pikakäytön vaiheiden aikana. Tässä tapauksessa Google Sss -koodi Open Sans -fontille, jonka tyyli ja fonttipaino on 400, näkyvät alla:

 @ font-face { 
 kirjasinperhe: 'Open Sans'; 
 fontti-tyyli: normaali; 
 kirjasimen paino: 400; 
 src: paikallinen ('Open Sans'), paikallinen ('OpenSans'), URL (http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) -muodossa; 
 } 
Esittely HTML-tuloste näkyy kuvassa E :

Kuvio E

Kehittyneet tekniikat

Google WebFont Loader on JavaScript-kirjasto, joka tarjoaa sinulle paremman hallinnan Google Fonts API -sovelluksen lataamiseen ja antaa sinun käyttää useita web-kirjasintarjoajia, joka kehitettiin yhdessä Typekitin kanssa. WebFont Loaderin käyttö vaatii jonkin verran Java-tietämystä; jos haluat sisällyttää nämä ominaisuudet, sinun tulee tarkistaa WebFont Loader -määritysten käyttöönoton ohjeet; Tarkastelen kuitenkin toisen segmentin edistynyttä tekniikkaa pian. HTML- ja CSS-tiedosto on ladattavissa.

© Copyright 2020 | mobilegn.com