Pri spletnem razvoju pravilna uporaba sloga pisave zagotavlja privlačen videz aplikacije. Ti slogi pisave dajejo vizualne namige o vrstnem redu branja dokumenta. Na primer, slog pisave naslova dokumenta mora biti krepek in pomemben od drugih. Oblikovanje pomaga tudi pri razlikovanju pomembne vsebine od drugih.
Učni rezultati tega članka so:
- Kaj so Googlove spletne pisave?
- Kako uvoziti Googlove pisave v HTML?
- Kako uporabiti Googlove pisave v datoteki CSS?
Kaj so Googlove spletne pisave?
Googlova spletna pisava je odprtokodna knjižnica, ki vsebuje na stotine slogov ali družin pisav. Ponuja tudi API-je, ki nam pomagajo pri uporabi spletnih pisav s sistemom Android in CSS. Googlove pisave so veliko lažje od drugih knjižnic pisav in so na voljo brezplačno za poslovno uporabo. Te je lažje implementirati na kateri koli spletni strani.
CSS privzeto ponuja sloge pisave fantasy, serif, Sans serif, cursive in monospace. Google Fonts lahko uporabite, če želite uporabljati druge sloge pisav.
Kako uvoziti Googlove pisave v HTML?
Če želite uporabiti Google Fonts na strani HTML, pojdite skozi naslednje korake.
1. korak: Izberite družino pisav
Najprej odprite Googlove pisave uradno spletno stran in izberite pisavo, ki vam je všeč. Na primer, izbrali smo ' Jastog dva ” družina pisav:
2. korak: Izberite sloge
Nato se pomaknite navzdol, da si ogledate seznam slogov. Dodajte jih v svojo zbirko tako, da kliknete » + ” znak:
3. korak: Oglejte si izbrane družine
Za ogled izbranih družin kliknite na spodaj označeno ikono:
4. korak: Kopirajte povezavo za vdelavo v HTML
Po tem se pomaknite navzdol in kopirajte povezavo družine pisav z uporabo označenega » Kopirati ” ikona:
Kako uporabiti Googlove pisave v datoteki CSS?
Če želite uporabiti kopijo Google Fonts v CSS za oblikovanje, preglejte dane primere.
Primer 1
Vključite ' ” za določitev vsebine ali odstavka:
< str > »Najboljše spletno mesto z vadnicami« str > Če želite uvoziti Google Fonts, prilepite kopirano kodo v »
Element sloga 'p'.
str {družina pisav: 'Jastog dva' , kurziv;
poravnava besedila: sredina;
velikost pisave: 45px;
barva: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
Naslednje razložene lastnosti CSS so uporabljene za HTML ' ' oznaka:
- “ družina pisav ” je dodeljena vrednost “ 'Jastog dva', kurziv ”. Ta družina pisav je uvožena iz storitve Google Fonts.
- “ poravnava besedila ” prilagodi poravnavo besedila.
- “ velikost pisave ” določa velikost pisave.
- “ barva ” nastavi barvo pisave.
Slika prikazuje, da je družina pisav uspešno uporabljena:
Primer 2
Vzemimo drug primer za uvoz » Nerko Eden ” Googlova pisava. V ta namen znova prilepite kodo za URL Googlove pisave »Nerko One« v »
Element sloga 'p'.
str {družina pisav: 'Nerko One' , kurziv;
teža pisave: 300 ;
velikost pisave: 30px;
}
' družina pisav ”, “ teža pisave «, in » velikost pisave ' lastnosti so uporabljene za HTML ' ” element.
Izhod
Naučili smo vas, kako uvoziti Googlove spletne pisave v datoteko CSS.
Zaključek
Če želite uvoziti Googlove pisave v CSS, najprej obiščite Googlove pisave uradno spletno mesto in izberite slog pisave. Nato kopirajte kodo, ki vsebuje » @uvoz ' in jo prilepite v datoteko CSS ali v '