U web razvoju, ispravna upotreba stila fonta daje atraktivan izgled aplikaciji. Ovi stilovi fonta daju vizualne naznake o redoslijedu čitanja dokumenta. Na primjer, stil fonta naslova dokumenta mora biti podebljan i značajan od drugih. Stil također pomaže u razlikovanju važnog sadržaja od ostalih.
Ishodi učenja ovog članka su:
- Što su Google web fontovi?
- Kako uvesti Google Fontove u HTML?
- Kako koristiti Google Fontove u CSS datoteci?
Što su Google web fontovi?
Google web font je biblioteka otvorenog koda koja sadrži stotine stilova ili obitelji fontova. Također pruža API-je koji nam pomažu u korištenju web-fontova s Androidom i CSS-om. Google Fontovi mnogo su lakši od ostalih biblioteka fontova i dostupni su besplatno za poslovnu upotrebu. Lakše ih je implementirati na bilo koju web stranicu.
Prema zadanim postavkama CSS nudi stilove fonta fantasy, serif, Sans serif, cursive i monospace. Google Fontovi mogu se koristiti ako želite koristiti neke druge stilove fonta.
Kako uvesti Google Fontove u HTML?
Za korištenje Google Fontova na HTML stranici, prođite kroz sljedeće korake.
Korak 1: Odaberite obitelj fontova
Prvo otvorite Google Fontovi službenu web stranicu i odaberite font koji vam se sviđa. Na primjer, odabrali smo ' Jastog dva ” obitelj-fontova:
Korak 2: Odaberite stilove
Zatim se pomaknite prema dolje da vidite popis stilova. Dodajte ih u svoju kolekciju klikom na ' + ” znak:
Korak 3: Pregledajte odabrane obitelji
Za pregled odabranih obitelji kliknite na dolje označenu ikonu:
Korak 4: Kopirajte vezu za ugradnju u HTML
Nakon toga, pomaknite se prema dolje i kopirajte vezu obitelji fontova pomoću označenog ' Kopirati ” ikona:
Kako koristiti Google fontove u CSS datoteci?
Da biste koristili kopiju Google Fontova u CSS-u za stiliziranje, prođite kroz dane primjere.
Primjer 1
Uključi ' ” za određivanje sadržaja ili odlomka:
< str > “Najbolja web stranica za poduke” str > Za uvoz Google Fontova, zalijepite kopirani kod u '
Element stila 'p'.
str {obitelj-fontova: 'Jastog dva' , kurziv;
poravnanje teksta: središte;
veličina fonta: 45px;
boja: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
Sljedeća objašnjena CSS svojstva primjenjuju se na HTML ' ” oznaka:
- “ obitelj-fontova ” dodjeljuje se vrijednost “ ‘Jastog dva’, kurziv ”. Ova obitelj fontova uvezena je iz Google Fontova.
- “ poravnanje teksta ” prilagođava poravnanje teksta.
- “ veličina fonta ” određuje veličinu fonta.
- “ boja ” postavlja boju fonta.
Slika pokazuje da je obitelj fontova uspješno primijenjena:
Primjer 2
Uzmimo još jedan primjer za uvoz ' Nerko jedan ” Google font. U tu svrhu ponovno zalijepite kod za URL Google fonta “Nerko One” u “
Element stila 'p'.
str {obitelj-fontova: 'Nerko jedan' , kurziv;
težina fonta: 300 ;
veličina fonta: 30px;
}
' obitelj-fontova ”, “ težina fonta ', i ' veličina fonta ' svojstva se primjenjuju na HTML ' ” element.
Izlaz
Naučili smo vas kako uvesti Google web fontove u CSS datoteku.
Zaključak
Za uvoz Google Fontova u CSS, prvo posjetite Google Fontovi službenu web stranicu i odaberite stil fonta. Zatim kopirajte kod koji sadrži ' @uvoz ' i zalijepite je u CSS datoteku ili u '