Ta blog bo govoril o uporabi pravila CSS @font-face.
Kaj je pravilo CSS @font-face?
Pravilo @font-face v CSS se uporablja za izdelavo pisav po meri za naše projekte. Te pisave je mogoče naložiti s strežnika ali sistemsko nameščenih pisav.
Kako uporabljati pravilo CSS @font-face?
Sintaksa za uporabo pravila CSS @font-face je navedena spodaj:
@font-face {
družina pisav : MyNewFont ;
src : url ( )
}
Pravilo @font-face je definirano z navedbo vrednosti v lastnosti družine pisav in povezanega URL-ja, od koder se ta pisava nahaja kot atribut src.
Primer
V spodnjem primeru bomo prilagodili pisave. Če želite to narediti, najprej prenesite pisave iz brskalnika in jih dodajte v mapo svojega projekta. Uporabite lahko tudi povezave, če uporabljate pisave s strežnika.
Najprej dodajte oznaki
in , nato uporabite za prilagajanje pisav za vsako od njiju. Izvedimo zgoraj opisani scenarij v treh korakih.
1. korak: Dodajte elemente v datoteko HTML
1. korak: Dodajte elemente v datoteko HTML
V HTML znotraj razdelka
dodajte in za dodajanje vsebine, povezane s spletno stranjo:
< h2 > Dobrodošli v Linuxhintu! < / h2 >
< h1 > Dobrodošli v Linuxhintu! < / h1 >
2. korak: Določite pravilo @font-face v CSS
< h2 > Dobrodošli v Linuxhintu! < / h2 >
< h1 > Dobrodošli v Linuxhintu! < / h1 >
2. korak: Določite pravilo @font-face v CSS
Če želite določiti pravilo, uporabite ključno besedo » @font-face ” se uporablja v CSS. Znotraj zavitih oklepajev dodajte lastnost družine pisav in dodajte ime pisave kot njeno vrednost. Nato z lastnostjo src določite pot URL prenesene pisave:
@font-face {
družina pisav : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Podobno bomo dodali še en blok pisave po meri:
@font-face {družina pisav : mojafont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Zdaj uporabite slog za elementa
in .
Element sloga h2
h2 {
družina pisav : myfont ;
velikost pisave : 50 slikovnih pik ;
}
Element sloga h2
h2 {družina pisav : myfont ;
velikost pisave : 50 slikovnih pik ;
}
Lastnosti, uporabljene za element
, so razložene spodaj:
- “ družina pisav ” je nastavljena z vrednostjo ” myfont ”, kar smo navedli v pravilu @font-face.
- “ velikost pisave Lastnost nastavi velikost pisave na 50 slikovnih pik.
Element sloga h1
h1 {
družina pisav : mojafont2 ;
velikost pisave : 70 slikovnih pik ;
barva : rjav ;
}
Tukaj je ' barva Lastnost se uporablja za barvanje pisave.
Na spodnji sliki je razvidno, da sta oznaki
in uspešno oblikovani z na novo deklariranimi pisavami:
Zagotovili smo metodo za uporabo pravila CSS @font-face.
Zaključek
Slogi pisave igrajo pomembno vlogo pri oblikovanju katere koli aplikacije estetsko privlačne. Naš sistem ima omejene sloge pisav, medtem ko razvijalec potrebuje različne pisave, da polepša svoje spletne aplikacije. Za to nam CSS omogoča uporabo pravila @font-face za dodajanje pisav po meri. Ta članek prikazuje pravilo @font-face, s katerim lahko prilagodite slog pisave v naši aplikaciji.