Tento blog bude hovoriť o použití pravidla CSS @font-face.
Čo je pravidlo CSS @font-face?
Pravidlo @font-face v CSS sa používa na vytváranie vlastných písiem pre naše projekty. Tieto fonty je možné načítať zo servera alebo z fontov nainštalovaných v systéme.
Ako používať pravidlo CSS @font-face?
Syntax na použitie pravidla CSS @font-face je uvedená nižšie:
@font-face {
font-family : MyNewFont ;
src : url ( )
}
Pravidlo @font-face je definované zadaním hodnoty vo vlastnosti font-family a súvisiacej adresy URL, z ktorej sa toto písmo nachádza, ako atribút src.
Príklad
V nižšie uvedenom príklade prispôsobíme písma. Ak to chcete urobiť, najprv si stiahnite písma z prehliadača a pridajte ich do priečinka vášho projektu. Odkazy môžete použiť aj vtedy, ak používate písma zo servera.
Najprv pridajte značky
a a potom použite na prispôsobenie písma každému z nich. Implementujme vyššie opísaný scenár v troch krokoch.
Krok 1: Pridajte prvky do súboru HTML
Krok 1: Pridajte prvky do súboru HTML
V HTML do sekcie
pridajte a na pridanie nejakého obsahu súvisiaceho s webovou stránkou:
< h2 > Vitajte v Linuxhint! < / h2 >
< h1 > Vitajte v Linuxhint! < / h1 >
Krok 2: Zadajte pravidlo @font-face v CSS
< h2 > Vitajte v Linuxhint! < / h2 >
< h1 > Vitajte v Linuxhint! < / h1 >
Krok 2: Zadajte pravidlo @font-face v CSS
Ak chcete špecifikovať pravidlo, kľúčové slovo „ @font-face ” sa používa v CSS. Do jeho zložených zátvoriek pridajte vlastnosť font-family a pridajte názov písma ako jeho hodnotu. Potom pomocou vlastnosti src zadajte cestu URL prevzatého písma:
@font-face {
font-family : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Podobne pridáme ďalší prispôsobený blok písma:
@font-face {font-family : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Teraz použite štýl na prvky
a .
Element štýlu h2
h2 {
font-family : myfont ;
veľkosť písma : 50 pixelov ;
}
Element štýlu h2
h2 {font-family : myfont ;
veľkosť písma : 50 pixelov ;
}
Vlastnosti použité na prvok
sú vysvetlené nižšie:
- “ font-family “ je nastavený s hodnotou “ myfont “, čo sme deklarovali v pravidle @font-face.
- “ veľkosť písma Vlastnosť ” nastaví veľkosť písma na 50px.
Element štýlu h1
h1 {
font-family : myfont2 ;
veľkosť písma : 70 pixelov ;
farba : hnedá ;
}
Tu je „ farba Vlastnosť ” sa používa na zafarbenie písma.
Z nižšie uvedeného obrázku je vidieť, že značky
a sú úspešne štylizované pomocou novo deklarovaných fontov:
Poskytli sme metódu na používanie pravidla CSS @font-face.
Záver
Štýly písma zohrávajú dôležitú úlohu pri vytváraní estetickej príťažlivosti akejkoľvek aplikácie. Náš systém má obmedzené štýly písma, zatiaľ čo vývojár potrebuje na skrášlenie svojich webových aplikácií rôzne písma. Na to nám CSS umožňuje použiť pravidlo @font-face na pridávanie vlastných písiem. Tento článok demonštroval pravidlo @font-face, pomocou ktorého si môžete prispôsobiť štýl písma v našej aplikácii.