Šajā emuārā tiks runāts par CSS @font-face kārtulas izmantošanu.
Kas ir CSS @font-face noteikums?
@font-face noteikums CSS tiek izmantots, lai izveidotu pielāgotus fontus mūsu projektiem. Šos fontus var ielādēt no servera vai sistēmā instalētajiem fontiem.
Kā lietot CSS @font-face noteikumu?
Sintakse, lai izmantotu CSS @font-face kārtulu, ir minēta tālāk:
@font-face {
fontu ģimene : Mans jauns fonts ;
src : url ( )
}
Noteikums @font-face tiek definēts, norādot vērtību fontu ģimenes rekvizītā un saistīto URL, no kurienes šis fonts atrodas, kā atribūtu src.
Piemērs
Tālāk esošajā piemērā mēs pielāgosim fontus. Lai to izdarītu, vispirms lejupielādējiet fontus no pārlūkprogrammas un pievienojiet tos sava projekta mapei. Varat arī izmantot saites, ja izmantojat fontus no servera.
Vispirms pievienojiet tagus
un , pēc tam izmantojiet, lai pielāgotu fontus katram no tiem. Īstenosim iepriekš aprakstīto scenāriju trīs posmos.
1. darbība: pievienojiet elementus HTML failam
1. darbība: pievienojiet elementus HTML failam
HTML sadaļā
pievienojiet un , lai pievienotu saturu, kas saistīts ar tīmekļa lapu:
< h2 > Laipni lūdzam Linuxhint! < / h2 >
< h1 > Laipni lūdzam Linuxhint! < / h1 >
2. darbība. CSS norādiet @font-face kārtulu
< h2 > Laipni lūdzam Linuxhint! < / h2 >
< h1 > Laipni lūdzam Linuxhint! < / h1 >
2. darbība. CSS norādiet @font-face kārtulu
Lai norādītu noteikumu, atslēgvārds “ @font-face ” tiek izmantots CSS. Tā cirtainajās iekavās pievienojiet fontu saimes rekvizītu un pievienojiet fonta nosaukumu kā tā vērtību. Pēc tam izmantojiet rekvizītu src, lai norādītu lejupielādētā fonta URL ceļu:
@font-face {
fontu ģimene : mans fonts ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Līdzīgi mēs pievienosim vēl vienu pielāgotu fontu bloku:
@font-face {fontu ģimene : mans fonts2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Tagad izmantojiet stilu
un elementiem.
Stils h2 elements
h2 {
fontu ģimene : mans fonts ;
fonta izmērs : 50 pikseļi ;
}
Stils h2 elements
h2 {fontu ģimene : mans fonts ;
fonta izmērs : 50 pikseļi ;
}
Rekvizīti, kas tiek piemēroti elementam
, ir izskaidroti tālāk:
- ' fontu ģimene ' ir iestatīts ar vērtību ' mans fonts ”, ko mēs esam deklarējuši @font-face noteikumā.
- ' fonta izmērs ” rekvizīts iestata fonta lielumu uz 50 pikseļiem.
Stils h1 elements
h1 {
fontu ģimene : mans fonts2 ;
fonta izmērs : 70 pikseļi ;
krāsa : brūns ;
}
Šeit ' krāsa ” rekvizīts tiek izmantots, lai izkrāsotu fontu.
No tālāk sniegtā attēla var redzēt, ka tagi
un ir veiksmīgi veidoti ar jaunizveidotajiem fontiem:
Mēs esam nodrošinājuši metodi CSS @font-face likuma izmantošanai.
Secinājums
Fontu stiliem ir liela nozīme, lai jebkura lietojumprogramma būtu estētiski pievilcīga. Mūsu sistēmai ir ierobežoti fontu stili, savukārt izstrādātājam ir nepieciešami dažādi fonti, lai papildinātu savas tīmekļa lietotnes. Lai to izdarītu, CSS ļauj mums izmantot @font-face noteikumu, lai pievienotu pielāgotus fontus. Šajā rakstā ir parādīts @font-face noteikums, ar kura palīdzību varat pielāgot fonta stilu mūsu lietojumprogrammā.