Denne blog vil tale om brugen af CSS @font-face reglen.
Hvad er CSS @font-face Rule?
@font-face-reglen i CSS bruges til at lave brugerdefinerede skrifttyper til vores projekter. Disse skrifttyper kan indlæses fra serveren eller systemets installerede skrifttyper.
Hvordan bruger man CSS @font-face Rule?
Syntaksen for at bruge CSS @font-face-reglen er nævnt nedenfor:
@font-face {
skrifttype-familie : MyNewFont ;
src : url ( )
}
@font-face-reglen defineres ved at angive en værdi i font-family-egenskaben og den relaterede URL, hvorfra denne skrifttype er placeret som src-attributten.
Eksempel
I nedenstående eksempel vil vi tilpasse skrifttyper. For at gøre det skal du først downloade skrifttyperne fra browseren og tilføje dem til mappen for dit projekt. Du kan også bruge links, hvis du bruger skrifttyper fra serveren.
Tilføj først
og tags, og anvend derefter for at tilpasse skrifttyper til hver af dem. Lad os implementere det ovenfor beskrevne scenario i tre trin.
Trin 1: Tilføj elementer til HTML-fil
Trin 1: Tilføj elementer til HTML-fil
I HTML, inde i
-sektionen, skal du tilføje og for at tilføje noget indhold relateret til websiden:
< h2 > Velkommen til Linuxhint! < / h2 >
< h1 > Velkommen til Linuxhint! < / h1 >
Trin 2: Angiv @font-face-reglen i CSS
< h2 > Velkommen til Linuxhint! < / h2 >
< h1 > Velkommen til Linuxhint! < / h1 >
Trin 2: Angiv @font-face-reglen i CSS
For at angive reglen skal søgeordet ' @font-face ” bruges i CSS. Inden for de krøllede parenteser skal du tilføje egenskaben font-family og tilføje skrifttypenavnet som dets værdi. Brug derefter egenskaben src til at angive URL-stien til den downloadede skrifttype:
@font-face {
skrifttype-familie : min skrifttype ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
På samme måde vil vi tilføje en anden tilpasset skrifttypeblok:
@font-face {skrifttype-familie : min skrifttype2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Anvend nu styling til
- og -elementerne.
Stil h2 Element
h2 {
skrifttype-familie : min skrifttype ;
skriftstørrelse : 50 px ;
}
Stil h2 Element
h2 {skrifttype-familie : min skrifttype ;
skriftstørrelse : 50 px ;
}
Egenskaberne anvendt på
-elementet er forklaret nedenfor:
- “ skrifttype-familie ' er indstillet med værdien ' min skrifttype ” hvilket er, hvad vi har erklæret i @font-face-reglen.
- “ skriftstørrelse ” egenskab indstiller størrelsen på skrifttypen til 50px.
Stil h1 Element
h1 {
skrifttype-familie : min skrifttype2 ;
skriftstørrelse : 70 px ;
farve : Brun ;
}
Her er ' farve egenskaben bruges til at farve skrifttypen.
Det kan ses på billedet nedenfor, at
- og -tags er blevet stylet med de nyligt erklærede skrifttyper:
Vi har leveret metoden til at bruge CSS @font-face reglen.
Konklusion
Skrifttyper spiller en vigtig rolle i at gøre enhver applikation æstetisk tiltalende. Vores system har begrænsede skrifttyper, mens en udvikler har brug for forskellige skrifttyper for at tilføje forskønnelse til deres webapps. For at gøre det giver CSS os mulighed for at bruge @font-face-reglen til at tilføje brugerdefinerede skrifttyper. Denne artikel har demonstreret @font-face-reglen, hvorigennem du kan tilpasse skrifttypestil i vores applikation.