Den här bloggen kommer att prata om användningen av CSS @font-face-regeln.
Vad är CSS @font-face Rule?
@font-face-regeln i CSS används för att skapa anpassade typsnitt för våra projekt. Dessa typsnitt kan laddas från servern eller systemets installerade typsnitt.
Hur använder man CSS @font-face-regeln?
Syntaxen för att använda CSS @font-face-regeln nämns nedan:
@font-face {
typsnittsfamilj : MyNewFont ;
src : url ( )
}
@font-face-regeln definieras genom att ange ett värde i font-family-egenskapen och den relaterade webbadressen varifrån detta teckensnitt finns som src-attributet.
Exempel
I exemplet nedan kommer vi att anpassa teckensnitt. För att göra det, ladda först ner teckensnitten från webbläsaren och lägg till dem i mappen för ditt projekt. Du kan också använda länkar om du använder typsnitt från servern.
Lägg först till
- och -taggar och använd sedan för att anpassa teckensnitt till var och en av dem. Låt oss implementera det ovan beskrivna scenariot i tre steg.
Steg 1: Lägg till element i HTML-filen
Steg 1: Lägg till element i HTML-filen
I HTML, i
-sektionen, lägg till och för att lägga till visst innehåll relaterat till webbsidan:
< h2 > Välkommen till Linuxhint! < / h2 >
< h1 > Välkommen till Linuxhint! < / h1 >
Steg 2: Ange @font-face-regeln i CSS
< h2 > Välkommen till Linuxhint! < / h2 >
< h1 > Välkommen till Linuxhint! < / h1 >
Steg 2: Ange @font-face-regeln i CSS
För att ange regeln, sökordet ' @font-face ” används i CSS. Lägg till egenskapen font-family inom dess lockiga parenteser och lägg till fontnamnet som dess värde. Använd sedan egenskapen src för att ange URL-sökvägen för det nedladdade teckensnittet:
@font-face {
typsnittsfamilj : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
På samma sätt kommer vi att lägga till ett annat anpassat teckensnittsblock:
@font-face {typsnittsfamilj : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Tillämpa nu stil på elementen
och .
Stil h2 Element
h2 {
typsnittsfamilj : myfont ;
textstorlek : 50 px ;
}
Stil h2 Element
h2 {typsnittsfamilj : myfont ;
textstorlek : 50 px ;
}
Egenskaperna som tillämpas på
-elementet förklaras nedan:
- ' typsnittsfamilj ' ställs in med värdet ' myfont ” vilket är vad vi har deklarerat i @font-face-regeln.
- ' textstorlek ”-egenskapen ställer in storleken på teckensnittet till 50px.
Stil h1 Element
h1 {
typsnittsfamilj : myfont2 ;
textstorlek : 70 pixlar ;
Färg : brun ;
}
Här är ' Färg ”-egenskapen används för att färga teckensnittet.
Det kan ses från bilden nedan att
- och -taggarna har formats med de nyligen deklarerade typsnitten:
Vi har tillhandahållit metoden för att använda CSS @font-face-regeln.
Slutsats
Typsnittsstilar spelar en viktig roll för att göra alla applikationer estetiskt tilltalande. Vårt system har begränsade teckensnittsstilar, medan en utvecklare behöver olika typsnitt för att lägga till försköning till sina webbappar. För att göra det tillåter CSS oss att använda @font-face-regeln för att lägga till anpassade typsnitt. Den här artikeln har demonstrerat @font-face-regeln genom vilken du kan anpassa teckensnittsstilen i vår applikation.