Veebiarenduses annab fondi stiili õige kasutamine rakendusele atraktiivse välimuse. Need kirjastiilid annavad visuaalseid vihjeid dokumendi lugemisjärjekorra kohta. Näiteks peab dokumendi päise kirjastiil olema paks ja teistest märkimisväärne. Stiil aitab ka olulist sisu muust eristada.
Selle artikli õpitulemused on järgmised:
- Mis on Google'i veebifondid?
- Kuidas importida Google'i fonte HTML-i?
- Kuidas kasutada Google'i fonte CSS-failis?
Mis on Google'i veebifondid?
Google'i veebifont on avatud lähtekoodiga teek, mis sisaldab sadu fondistiile või -perekondi. Samuti pakub see API-sid, mis aitavad meil kasutada veebifonte Androidi ja CSS-iga. Google Fonts on palju kergem kui teised fonditeegid ja on äriliseks kasutamiseks tasuta saadaval. Neid on igal veebisaidil lihtsam rakendada.
Vaikimisi pakub CSS fantasy-, serif-, Sans serif-, kursiiv- ja üheruumilise fondi stiile. Google'i fonte saab kasutada, kui soovite kasutada mõnda muud fondistiili.
Kuidas importida Google'i fonte HTML-i?
Google'i fontide kasutamiseks HTML-lehel järgige järgmisi samme.
1. samm: valige fondiperekond
Esiteks avage Google'i fondid ametlikul veebisaidil ja valige soovitud font. Näiteks oleme valinud ' Homaar kaks ” font-perekond:
2. samm: valige stiilid
Järgmisena kerige stiilide loendi kuvamiseks alla. Lisage need oma kogusse, klõpsates ' + 'märk:
3. samm: vaadake valitud perekondi
Valitud perede vaatamiseks klõpsake allpool esiletõstetud ikooni:
4. samm: kopeerige link HTML-i manustamiseks
Pärast seda kerige alla ja kopeerige fondipere link, kasutades esiletõstetud ' Kopeeri ” ikoon:
Kuidas kasutada Google'i fonte CSS-failis?
Google Fontsi koopia kasutamiseks CSS-is stiili kujundamiseks vaadake toodud näiteid.
Näide 1
Kaasake ' ” element teatud sisu või lõigu täpsustamiseks:
< lk > “Parim õpetuse veebisait” lk > Google'i fontide importimiseks kleepige kopeeritud kood kausta '
Stiili 'p' element
lk {font-perekond: 'Lobster Two' , kursiiv;
teksti joondamine: keskel;
fondi suurus: 45 pikslit;
värv: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
HTML-ile rakendatakse järgmisi selgitatud CSS-i omadusi ' ” silt:
- “ font-perekond ' on määratud väärtusega ' „Lobster Two”, kursiiv ”. See fondiperekond on imporditud teenusest Google Fonts.
- “ teksti joondamine ” kohandab teksti joondust.
- “ fondi suurus ” määrab fondi suuruse.
- “ värvi ” määrab fondi värvi.
Pilt näitab, et fondiperekond on edukalt rakendatud:
Näide 2
Võtame teise näite, et importida Nerko Üks Google'i font. Selleks kleepige uuesti 'Nerko One' Google'i fondi URL-i kood '
Stiili 'p' element
lk {font-perekond: 'Nerko One' , kursiiv;
fondi kaal: 300 ;
fondi suurus: 30 pikslit;
}
' font-perekond ”, “ font-weight ”, ja „ fondi suurus ' atribuudid rakendatakse HTML-ile ' ” element.
Väljund
Oleme teile õpetanud, kuidas importida Google'i veebifonte CSS-faili.
Järeldus
Google'i fontide importimiseks CSS-is külastage esmalt lehte Google'i fondid ametlikul veebisaidil ja valige fondi stiil. Seejärel kopeerige kood, mis sisaldab @import ' märksõna ja kleepige see CSS-faili või