Denne bloggen vil snakke om bruken av CSS @font-face-regelen.
Hva er CSS @font-face Rule?
@font-face-regelen i CSS brukes til å lage tilpassede fonter for våre prosjekter. Disse skriftene kan lastes fra serveren eller systemets installerte fonter.
Hvordan bruke CSS @font-face-regelen?
Syntaksen for å bruke CSS @font-face-regelen er nevnt nedenfor:
@font-face {
font-familie : MyNewFont ;
src : url ( )
}
@font-face-regelen er definert ved å spesifisere en verdi i font-family-egenskapen og den relaterte URL-en der denne fonten er plassert som src-attributtet.
Eksempel
I eksemplet nedenfor vil vi tilpasse fonter. For å gjøre det, last først ned skriftene fra nettleseren og legg dem til i mappen til prosjektet ditt. Du kan også bruke lenker hvis du bruker fonter fra serveren.
Først legger du til
- og -koder, og bruk deretter for å tilpasse fonter til hver av dem. La oss implementere det ovenfor beskrevne scenariet i tre-trinn.
Trinn 1: Legg til elementer i HTML-fil
Trinn 1: Legg til elementer i HTML-fil
I HTML, i
-delen, legg til og for å legge til noe innhold relatert til nettsiden:
< h2 > Velkommen til Linuxhint! < / h2 >
< h1 > Velkommen til Linuxhint! < / h1 >
Trinn 2: Spesifiser @font-face-regelen i CSS
< h2 > Velkommen til Linuxhint! < / h2 >
< h1 > Velkommen til Linuxhint! < / h1 >
Trinn 2: Spesifiser @font-face-regelen i CSS
For å spesifisere regelen, søkeordet ' @font-face ' brukes i CSS. Innenfor de krøllede parentesene legger du til egenskapen font-familie og legger til skriftnavnet som verdien. Deretter bruker du src-egenskapen til å spesifisere URL-banen til den nedlastede fonten:
@font-face {
font-familie : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
På samme måte vil vi legge til en annen tilpasset skriftblokk:
@font-face {font-familie : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Bruk nå styling på
- og -elementene.
Stil h2 Element
h2 {
font-familie : myfont ;
skriftstørrelse : 50 piksler ;
}
Stil h2 Element
h2 {font-familie : myfont ;
skriftstørrelse : 50 piksler ;
}
Egenskapene brukt på
-elementet er forklart nedenfor:
- ' font-familie ' er satt med verdien ' myfont ” som er det vi har erklært i @font-face-regelen.
- ' skriftstørrelse ”-egenskapen setter størrelsen på skrifttypen til 50px.
Stil h1 Element
h1 {
font-familie : myfont2 ;
skriftstørrelse : 70 piksler ;
farge : brun ;
}
Her er ' farge ”-egenskapen brukes til å fargelegge skriften.
Det kan sees fra bildet nedenfor at
- og -taggene er stilt med de nylig deklarerte skriftene:
Vi har gitt metoden for å bruke CSS @font-face-regelen.
Konklusjon
Skriftstiler spiller en viktig rolle for å gjøre enhver applikasjon estetisk tiltalende. Systemet vårt har begrensede skriftstiler, mens en utvikler trenger forskjellige fonter for å legge til forskjønnelse til nettappene sine. For å gjøre det lar CSS oss bruke @font-face-regelen for å legge til egendefinerte fonter. Denne artikkelen har demonstrert @font-face-regelen der du kan tilpasse skriftstilen i applikasjonen vår.