Šiame tinklaraštyje bus kalbama apie CSS @font-face taisyklės naudojimą.
Kas yra CSS @font-face taisyklė?
@font-face taisyklė CSS yra naudojama kuriant pasirinktinius šriftus mūsų projektams. Šiuos šriftus galima įkelti iš serverio arba sistemoje įdiegtų šriftų.
Kaip naudoti CSS @font-face taisyklę?
Toliau paminėta CSS @font-face taisyklės sintaksė:
@šrifto veidas {
šrifto šeima : Mano naujas šriftas ;
src : url ( )
}
@font-face taisyklė apibrėžiama nurodant reikšmę šriftų šeimos ypatybėje ir susijusį URL, iš kurio yra šis šriftas, kaip src atributą.
Pavyzdys
Žemiau pateiktame pavyzdyje mes pritaikysime šriftus. Norėdami tai padaryti, pirmiausia atsisiųskite šriftus iš naršyklės ir pridėkite juos prie projekto aplanko. Taip pat galite naudoti nuorodas, jei naudojate šriftus iš serverio.
Pirmiausia pridėkite žymas
ir , tada pritaikykite kiekvieno iš jų šriftus. Įgyvendinkime aukščiau aprašytą scenarijų trimis etapais.
1 veiksmas: pridėkite elementus prie HTML failo
1 veiksmas: pridėkite elementus prie HTML failo
HTML skiltyje
pridėkite ir , kad pridėtumėte su tinklalapiu susijusį turinį:
< h2 > Sveiki atvykę į Linuxhint! < / h2 >
< h1 > Sveiki atvykę į Linuxhint! < / h1 >
2 veiksmas: nurodykite @font-face taisyklę CSS
< h2 > Sveiki atvykę į Linuxhint! < / h2 >
< h1 > Sveiki atvykę į Linuxhint! < / h1 >
2 veiksmas: nurodykite @font-face taisyklę CSS
Norėdami nurodyti taisyklę, raktinis žodis ' @šrifto veidas “ yra naudojamas CSS. Garbanotuose skliaustuose pridėkite šriftų šeimos ypatybę ir pridėkite šrifto pavadinimą kaip jo vertę. Tada naudokite ypatybę src, kad nurodytumėte atsisiųsto šrifto URL kelią:
@šrifto veidas {
šrifto šeima : mano šriftas ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Panašiai pridėsime kitą tinkintą šriftų bloką:
@šrifto veidas {šrifto šeima : mano šriftas2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Dabar pritaikykite stilių
ir elementams.
Stilius h2 elementas
h2 {
šrifto šeima : mano šriftas ;
šrifto dydis : 50 piks ;
}
Stilius h2 elementas
h2 {šrifto šeima : mano šriftas ;
šrifto dydis : 50 piks ;
}
Elementui
taikomos savybės paaiškintos toliau:
- “ šrifto šeima “ yra nustatyta reikšme “ mano šriftas “, ką paskelbėme @font-face taisyklėje.
- “ šrifto dydis “ ypatybė nustato šrifto dydį į 50 pikselių.
Stilius h1 elementas
h1 {
šrifto šeima : mano šriftas2 ;
šrifto dydis : 70 piks ;
spalva : rudas ;
}
Čia „ spalva “ ypatybė naudojama šriftui nuspalvinti.
Iš toliau pateikto paveikslėlio matyti, kad žymos
ir sėkmingai suformuotos naudojant naujai deklaruotus šriftus:
Pateikėme CSS @font-face taisyklės naudojimo būdą.
Išvada
Šrifto stiliai atlieka svarbų vaidmenį, kad bet kokia programa būtų estetiškai patraukli. Mūsų sistemoje taikomi riboti šriftų stiliai, o kūrėjui reikia skirtingų šriftų, kad savo žiniatinklio programas pagražintų. Norėdami tai padaryti, CSS leidžia mums naudoti @font-face taisyklę, kad pridėtume pasirinktinius šriftus. Šiame straipsnyje parodyta @font-face taisyklė, pagal kurią galite tinkinti šrifto stilių mūsų programoje.