See ajaveeb räägib CSS-i @font-face reegli kasutamisest.
Mis on CSS @font-face reegel?
CSS-i @font-face reeglit kasutatakse meie projektide jaoks kohandatud fontide loomiseks. Neid fonte saab laadida serverist või süsteemi installitud fontidest.
Kuidas kasutada CSS-i @font-face reeglit?
CSS-i @font-face reegli kasutamise süntaksit mainitakse allpool:
@font-nägu {
font-perekond : MinuUus Font ;
src : url ( )
}
@font-face reegel määratletakse atribuudi font-family väärtuse ja sellega seotud URL-i, kust see font asub, määramisega src atribuudina.
Näide
Allolevas näites kohandame fonte. Selleks laadige esmalt brauserist alla fondid ja lisage need oma projekti kausta. Kui kasutate serverist pärit fonte, saate kasutada ka linke.
Esmalt lisage sildid
ja , seejärel rakendage nende fondide kohandamiseks. Rakendame ülalkirjeldatud stsenaariumi kolmes etapis.
1. samm: lisage HTML-faili elemendid
1. samm: lisage HTML-faili elemendid
HTML-i jaotisesse
lisage veebilehega seotud sisu lisamiseks ja :
< h2 > Tere tulemast Linuxhinti! < / h2 >
< h1 > Tere tulemast Linuxhinti! < / h1 >
2. samm: määrake CSS-is @font-face reegel
< h2 > Tere tulemast Linuxhinti! < / h2 >
< h1 > Tere tulemast Linuxhinti! < / h1 >
2. samm: määrake CSS-is @font-face reegel
Reegli täpsustamiseks kasutage märksõna ' @font-nägu ” kasutatakse CSS-is. Lisage selle lokkis sulgudesse fondipere atribuut ja lisage väärtuseks fondi nimi. Seejärel kasutage atribuuti src, et määrata allalaaditud fondi URL-i tee:
@font-nägu {
font-perekond : minu font ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Samamoodi lisame veel ühe kohandatud fondiploki:
@font-nägu {font-perekond : minu font2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Nüüd rakendage elementide
ja stiili.
Stiil h2 element
h2 {
font-perekond : minu font ;
fondi suurus : 50 pikslit ;
}
Stiil h2 element
h2 {font-perekond : minu font ;
fondi suurus : 50 pikslit ;
}
Elemendile
rakendatud atribuute selgitatakse allpool:
- “ font-perekond ' on seatud väärtusega ' minu font ”, mille oleme @font-face reeglis deklareerinud.
- “ fondi suurus ” atribuut määrab fondi suuruseks 50 pikslit.
Stiil h1 element
h1 {
font-perekond : minu font2 ;
fondi suurus : 70 pikslit ;
värvi : pruun ;
}
Siin on ' värvi ” atribuuti kasutatakse fondi värvimiseks.
Allolevalt pildilt on näha, et sildid
ja on edukalt kujundatud äsja deklareeritud fontidega:
Oleme pakkunud meetodi CSS-i @font-face reegli kasutamiseks.
Järeldus
Kirjastiilid mängivad olulist rolli iga rakenduse esteetiliselt atraktiivseks muutmisel. Meie süsteemis on piiratud kirjastiilid, samas kui arendajal on vaja erinevaid fonte, et oma veebirakendusi kaunistada. Selleks võimaldab CSS meil kasutada kohandatud fontide lisamiseks reeglit @font-face. See artikkel on näidanud @font-face reeglit, mille kaudu saate meie rakenduses fondi stiili kohandada.