Kuriant internetą, tinkamas šrifto stiliaus naudojimas suteikia programai patrauklią išvaizdą. Šie šriftų stiliai suteikia vaizdinių užuominų apie dokumento skaitymo tvarką. Pavyzdžiui, dokumento antraštės šrifto stilius turi būti paryškintas ir reikšmingas iš kitų. Stilius taip pat padeda atskirti svarbų turinį nuo kito.
Šio straipsnio mokymosi rezultatai yra šie:
- Kas yra „Google“ žiniatinklio šriftai?
- Kaip importuoti „Google“ šriftus į HTML?
- Kaip naudoti „Google“ šriftus CSS faile?
Kas yra „Google“ žiniatinklio šriftai?
„Google“ žiniatinklio šriftas yra atvirojo kodo biblioteka, kurioje yra šimtai šriftų stilių ar šeimų. Jame taip pat yra API, kurios padeda mums naudoti žiniatinklio šriftus su „Android“ ir CSS. „Google“ šriftai yra daug lengvesni nei kitos šriftų bibliotekos ir yra nemokami verslo reikmėms. Tai lengviau įdiegti bet kurioje svetainėje.
Pagal numatytuosius nustatymus CSS siūlo fantasy, serif, Sans serif, cursive ir monospace šriftų stilius. Jei norite naudoti kitus šriftų stilius, galite naudoti „Google“ šriftus.
Kaip importuoti „Google“ šriftus į HTML?
Jei norite naudoti „Google“ šriftus HTML puslapyje, atlikite šiuos veiksmus.
1 veiksmas: pasirinkite šriftų šeimą
Pirmiausia atidarykite „Google“ šriftai oficialioje svetainėje ir pasirinkite norimą šriftą. Pavyzdžiui, mes pasirinkome „ Omaras du ' šrifto šeima:
2 veiksmas: pasirinkite stilius
Tada slinkite žemyn, kad peržiūrėtumėte stilių sąrašą. Pridėkite juos prie savo kolekcijos spustelėdami „ + “ ženklas:
3 veiksmas: peržiūrėkite pasirinktas šeimas
Norėdami peržiūrėti pasirinktas šeimas, spustelėkite toliau paryškintą piktogramą:
4 veiksmas: nukopijuokite nuorodą, kad įterptumėte į HTML
Po to slinkite žemyn ir nukopijuokite šriftų šeimos nuorodą naudodami paryškintą ' Kopijuoti “ piktograma:
Kaip naudoti „Google“ šriftus CSS faile?
Jei norite formuoti stilių, naudodami „Google Fonts“ kopiją CSS, peržiūrėkite pateiktus pavyzdžius.
1 pavyzdys
Įtraukti ' “ elementą, kad nurodytumėte tam tikrą turinį ar pastraipą:
< p > „Geriausia mokymo svetainė“ p > Norėdami importuoti „Google“ šriftus, įklijuokite nukopijuotą kodą į „
Stiliaus „p“ elementas
p {šrifto šeima: 'Lobster Two' , kursyvus;
teksto lygiavimas: centre;
šrifto dydis: 45 pikseliai;
spalva: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
Toliau paaiškintos CSS savybės taikomos HTML “ žyma:
- “ šrifto šeima “ yra priskirta reikšme “ „Lobster Two“, kursyvas “. Ši šriftų šeima importuota iš „Google Fonts“.
- “ teksto lygiavimas “ koreguoja teksto lygiavimą.
- “ šrifto dydis “ nustato šrifto dydį.
- “ spalva “ nustato šrifto spalvą.
Paveikslėlyje parodyta, kad šriftų šeima sėkmingai pritaikyta:
2 pavyzdys
Paimkime kitą pavyzdį, kaip importuoti Nerko Vienas “ Google šriftas. Šiuo tikslu dar kartą įklijuokite „Nerko One“ „Google“ šrifto URL kodą į „
Stiliaus „p“ elementas
p {šrifto šeima: 'Nerko One' , kursyvus;
šrifto svoris: 300 ;
šrifto dydis: 30 pikselių;
}
„ šrifto šeima “, „ šrifto svoris “ ir „ šrifto dydis 'Ypatybės taikomos HTML' “ elementas.
Išvestis
Mes išmokėme jus importuoti „Google“ žiniatinklio šriftus į CSS failą.
Išvada
Norėdami importuoti „Google“ šriftus į CSS, pirmiausia apsilankykite „Google“ šriftai oficialioje svetainėje ir pasirinkite šrifto stilių. Tada nukopijuokite kodą, kuriame yra ' @importuoti “ raktinį žodį ir įklijuokite jį į CSS failą arba „