Verkkokehityksessä oikea fonttityyli antaa sovellukselle houkuttelevan ilmeen. Nämä kirjasintyylit antavat visuaalisia vihjeitä asiakirjan lukujärjestyksestä. Esimerkiksi asiakirjan otsikon kirjasintyylin on oltava lihavoitu ja muilta kannalta merkittävä. Tyyli auttaa myös erottamaan tärkeän sisällön muista.
Tämän artikkelin oppimistulokset ovat:
- Mitä Google-verkkofontit ovat?
- Kuinka tuoda Google-kirjasimia HTML:ään?
- Kuinka käyttää Google-fontteja CSS-tiedostossa?
Mitä Google-verkkofontit ovat?
Googlen verkkofontti on avoimen lähdekoodin kirjasto, joka sisältää satoja kirjasintyylejä tai -perheitä. Se tarjoaa myös sovellusliittymiä, jotka auttavat meitä käyttämään verkkofontteja Androidin ja CSS:n kanssa. Google-kirjasimet ovat paljon kevyempiä kuin muut kirjasinkirjastot, ja ne ovat saatavilla ilmaiseksi yrityskäyttöön. Nämä on helpompi toteuttaa millä tahansa verkkosivustolla.
Oletusarvoisesti CSS tarjoaa fantasia-, serif-, sans serif-, kursiivi- ja monospace-kirjasintyylejä. Google Fontsia voidaan käyttää, jos haluat käyttää muita kirjasintyylejä.
Kuinka tuoda Google-kirjasimia HTML:ään?
Jos haluat käyttää Google Fontsia HTML-sivulla, suorita seuraavat vaiheet.
Vaihe 1: Valitse kirjasinperhe
Avaa ensin Google-kirjasimet virallinen verkkosivusto ja valitse haluamasi fontti. Olemme esimerkiksi valinneet ' Hummeri kaksi ” font-family:
Vaihe 2: Valitse tyylit
Vieritä seuraavaksi alas nähdäksesi tyyliluettelon. Lisää ne kokoelmaasi napsauttamalla ' + ”merkki:
Vaihe 3: Tarkastele valittuja perheitä
Näet valitut perheet napsauttamalla alla korostettua kuvaketta:
Vaihe 4: Kopioi linkki upottaaksesi HTML-koodiin
Vieritä sen jälkeen alas ja kopioi fonttiperheen linkki käyttämällä korostettua ' Kopio ”-kuvake:
Kuinka käyttää Google-fontteja CSS-tiedostossa?
Jos haluat käyttää Google Fonts -kopiota CSS:ssä tyyliin, käy läpi annetut esimerkit.
Esimerkki 1
Sisällytä ' ”-elementti, joka määrittää sisällön tai kappaleen:
< s > “Paras opetussivusto” s > Tuo Google-kirjasimet liittämällä kopioitu koodi '
Tyyli 'p' elementti
s {font-family: 'Lobster Two' , kursiivinen;
tekstin tasaus: keskellä;
fonttikoko: 45px;
väri: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
Seuraavat selostetut CSS-ominaisuudet sovelletaan HTML:ään ' 'tunniste:
- ' font-perhe ' on määritetty arvolla ' 'Lobster Two', kursiivinen ”. Tämä kirjasinperhe on tuotu Google Fontsista.
- ' tekstin tasaus ” säätää tekstin tasausta.
- ' Fonttikoko ” määrittää kirjasinkoon.
- ' väri- ” määrittää fontin värin.
Kuvassa näkyy, että kirjasinperhe on otettu käyttöön onnistuneesti:
Esimerkki 2
Otetaan toinen esimerkki tuodaksesi ' Nerko Yksi ”Google-fontti. Liitä tätä tarkoitusta varten uudelleen 'Nerko One' Google -kirjasimen URL-koodi '
Tyyli 'p' elementti
s {font-family: 'Nerko One' , kursiivinen;
fontin paino: 300 ;
fonttikoko: 30px;
}
' font-perhe ”, “ fontin paino ”, ja ” Fonttikoko '-ominaisuuksia sovelletaan HTML:ään' ”elementtiä.
Lähtö
Olemme opettaneet sinulle kuinka tuoda Google-verkkokirjasimia CSS-tiedostoon.
Johtopäätös
Tuo Google Fonts CSS:ään käymällä ensin osoitteessa Google-kirjasimet virallinen verkkosivusto ja valitse kirjasintyyli. Kopioi sitten koodi, joka sisältää ' @tuonti '-avainsana ja liitä se CSS-tiedostoon tai '