Deze blog gaat over het gebruik van de CSS @font-face-regel.
Wat is CSS @font-face-regel?
De @font-face-regel in CSS wordt gebruikt om aangepaste lettertypen voor onze projecten te maken. Deze lettertypen kunnen worden geladen vanaf de server of de door het systeem geïnstalleerde lettertypen.
Hoe CSS @font-face-regel te gebruiken?
De syntaxis voor het gebruik van de CSS @font-face-regel wordt hieronder vermeld:
@lettertype {
font-familie : MijnNieuwFont ;
src : url ( )
}
De regel @font-face wordt gedefinieerd door een waarde op te geven in de eigenschap font-family en de gerelateerde URL waar dit lettertype zich bevindt als het src-attribuut.
Voorbeeld
In het onderstaande voorbeeld zullen we lettertypen aanpassen. Download hiervoor eerst de lettertypen vanuit de browser en voeg ze toe aan de map van uw project. U kunt ook links gebruiken als u lettertypen van de server gebruikt.
Voeg eerst
- en -tags toe en pas ze vervolgens toe om lettertypen voor elk van hen aan te passen. Laten we het hierboven beschreven scenario in drie stappen implementeren.
Stap 1: Elementen toevoegen aan HTML-bestand
Stap 1: Elementen toevoegen aan HTML-bestand
Voeg in HTML in de
-sectie en toe om wat inhoud toe te voegen die verband houdt met de webpagina:
< h2 > Welkom bij Linuxhint! < / h2 >
< h1 > Welkom bij Linuxhint! < / h1 >
Stap 2: Specificeer de @font-face-regel in CSS
< h2 > Welkom bij Linuxhint! < / h2 >
< h1 > Welkom bij Linuxhint! < / h1 >
Stap 2: Specificeer de @font-face-regel in CSS
Om de regel te specificeren, het trefwoord ' @lettertype ” wordt gebruikt in CSS. Voeg binnen de accolades de eigenschap font-family toe en voeg de naam van het lettertype toe als waarde. Gebruik vervolgens de eigenschap src om het URL-pad van het gedownloade lettertype op te geven:
@lettertype {
font-familie : mijnlettertype ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Op dezelfde manier zullen we nog een aangepast lettertypeblok toevoegen:
@lettertype {font-familie : mijnfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Pas nu styling toe op de
en elementen.
Stijl h2 Element
h2 {
font-familie : mijnlettertype ;
lettertypegrootte : 50px ;
}
Stijl h2 Element
h2 {font-familie : mijnlettertype ;
lettertypegrootte : 50px ;
}
De eigenschappen die worden toegepast op het
-element worden hieronder uitgelegd:
- “ font-familie ” is ingesteld met de waarde “ mijnlettertype ” dat is wat we hebben verklaard in de @font-face-regel.
- “ lettertypegrootte ” eigenschap stelt de grootte van het lettertype in op 50px.
Stijl h1 Element
h1 {
font-familie : mijnfont2 ;
lettertypegrootte : 70px ;
kleur : bruin ;
}
Hier de ' kleur ” eigenschap wordt gebruikt om het lettertype te kleuren.
In de onderstaande afbeelding is te zien dat
- en -tags met succes zijn opgemaakt met de nieuw gedeclareerde lettertypen:
We hebben de methode gegeven voor het gebruik van de CSS @font-face-regel.
Conclusie
Lettertypestijlen spelen een belangrijke rol bij het esthetisch aantrekkelijk maken van elke toepassing. Ons systeem heeft beperkte lettertypestijlen, terwijl een ontwikkelaar verschillende lettertypen nodig heeft om zijn webapps mooier te maken. Om dit te doen, stelt CSS ons in staat om de @font-face-regel te gebruiken voor het toevoegen van aangepaste lettertypen. Dit artikel heeft de @font-face-regel gedemonstreerd waarmee u de lettertypestijl in onze applicatie kunt aanpassen.