Ovaj blog će govoriti o korištenju CSS pravila @font-face.
Što je CSS @font-face pravilo?
Pravilo @font-face u CSS-u koristi se za izradu prilagođenih fontova za naše projekte. Ti se fontovi mogu učitati s poslužitelja ili instaliranih fontova sustava.
Kako koristiti CSS @font-face pravilo?
Sintaksa za korištenje pravila CSS @font-face navedena je u nastavku:
@font-lice {
obitelj-fontova : MojNoviFont ;
src : url ( )
}
Pravilo @font-face definirano je određivanjem vrijednosti u svojstvu font-family i povezanog URL-a odakle se ovaj font nalazi kao atribut src.
Primjer
U donjem primjeru prilagodit ćemo fontove. Da biste to učinili, prvo preuzmite fontove iz preglednika i dodajte ih u mapu svog projekta. Također možete koristiti veze ako koristite fontove s poslužitelja.
Najprije dodajte oznake
i , a zatim ih primijenite za prilagodbu fontova. Implementirajmo gore opisani scenarij u tri koraka.
Korak 1: Dodajte elemente u HTML datoteku
Korak 1: Dodajte elemente u HTML datoteku
U HTML-u, unutar odjeljka
, dodajte i za dodavanje nekog sadržaja povezanog s web stranicom:
< h2 > Dobrodošli u Linuxhint! < / h2 >
< h1 > Dobrodošli u Linuxhint! < / h1 >
Korak 2: Odredite pravilo @font-face u CSS-u
< h2 > Dobrodošli u Linuxhint! < / h2 >
< h1 > Dobrodošli u Linuxhint! < / h1 >
Korak 2: Odredite pravilo @font-face u CSS-u
Da biste odredili pravilo, ključna riječ ' @font-lice ” koristi se u CSS-u. Unutar vitičastih zagrada dodajte svojstvo font-family i dodajte naziv fonta kao njegovu vrijednost. Zatim upotrijebite svojstvo src za navođenje URL putanje preuzetog fonta:
@font-lice {
obitelj-fontova : mojfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Slično ćemo dodati još jedan prilagođeni blok fonta:
@font-lice {obitelj-fontova : mojfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Sada primijenite stil na elemente
i .
Stil h2 Element
h2 {
obitelj-fontova : mojfont ;
veličina fonta : 50 px ;
}
Stil h2 Element
h2 {obitelj-fontova : mojfont ;
veličina fonta : 50 px ;
}
Svojstva primijenjena na element
objašnjena su u nastavku:
- “ obitelj-fontova ” postavlja se s vrijednošću “ mojfont ” što smo deklarirali u pravilu @font-face.
- “ veličina fonta ” Svojstvo postavlja veličinu fonta na 50px.
Stil h1 Element
h1 {
obitelj-fontova : mojfont2 ;
veličina fonta : 70 px ;
boja : smeđa ;
}
Ovdje ' boja ” Svojstvo se koristi za bojanje fonta.
Na donjoj slici se može vidjeti da su oznake
i uspješno oblikovane s novodeklarisanim fontovima:
Osigurali smo metodu za korištenje CSS pravila @font-face.
Zaključak
Stilovi fontova igraju važnu ulogu u postizanju estetske privlačnosti svake aplikacije. Naš sustav ima ograničene stilove fontova, dok programer treba različite fontove kako bi uljepšao svoje web aplikacije. Da bismo to učinili, CSS nam omogućuje korištenje pravila @font-face za dodavanje prilagođenih fontova. Ovaj članak demonstrira pravilo @font-face pomoću kojeg možete prilagoditi stil fonta u našoj aplikaciji.