En font er et sett med teksttegn med litt stil og størrelse som gir verdi til applikasjonen. CSS tillater oss å lage tilpassede skrifter i henhold til våre behov ved å bruke "@Font-Face" regel. For dette kreves det å laste ned skriften eller gi en lenke til skriftene fra serveren. Mer spesifikt trenger utviklere forskjellige skrifter for prosjektene sine, og uten @font-face-regelen vil systemet være begrenset til skrifter som allerede er installert i systemet vårt.

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 skrifter for prosjektene våre. Disse skriftene kan lastes fra serveren eller systemets installerte skrifter.

Hvordan bruke CSS @Font-Face Rule?

Syntaksen for å bruke CSS @font-face-regelen er nevnt nedenfor:

@font-ansikt
Font-Family: MyNewfont;
SRC: URL ()

@Font-face-regelen er definert ved.

Eksempel

I eksemplet nedenfor vil vi tilpasse skrifter. For å gjøre det, først, last ned skriftene fra nettleseren og legg dem til mappen til prosjektet ditt. Du kan også bruke lenker hvis du bruker skrifter fra serveren.

For det første, legg til

og

Tagger, og bruk deretter for å tilpasse skrifter til hver av dem. La oss implementere det ovenfor beskrevne scenariet i tretrinn.

Trinn 1: Legg til elementer i HTML -filen

I HTML, inne i seksjonen, legg til

og

For å legge til noe innhold relatert til websiden:

Velkommen til Linuxhint!

Velkommen til Linuxhint!

Trinn 2: Spesifiser @font-face-regelen i CSS

For å spesifisere regelen, nøkkelordet “@Font-Face”Brukes i CSS. Inne i de krøllete parentesene, legg til font-familiens egenskap og legg til skriftnavnet som verdien. Bruk deretter SRC -egenskapen til å spesifisere URL -banen til den nedlastede skrifttypen:

@font-ansikt
Font-Family: Myfont;
SRC: URL ("/Fonter/Batuphat \ Script.otf ");

Tilsvarende vil vi legge til en annen tilpasset fontblokk:

@font-ansikt
Font-Family: Myfont2;
SRC: URL ("/Fonter/Olive_Vine \ Demo.otf ");

Nå, bruk styling på

og

elementer.

Stil H2 -element

H2
Font-Family: Myfont;
Font-størrelse: 50px;

Egenskapene som ble brukt på

elementet blir forklart nedenfor:

• “Font-familie”Er satt med verdien”myfont”Det er det vi har erklært i @font-face-regelen.
• “skriftstørrelse”Eiendom setter størrelsen på skriften til 50px.

Stil H1 -element

H1
Font-Family: Myfont2;
Font-størrelse: 70px;
Farge: brun;

Her "farge”Eiendom brukes til å fargelegge skriften.

Det kan sees fra det undervernede bildet som

og

Tagger er vellykket stylet med de nylig deklarerte skriftene:

Vi har gitt metoden for bruk av CSS @Font-Face Rule.

Konklusjon

Fontstiler spiller en viktig rolle i å gjøre enhver applikasjon estetisk tiltalende. Systemet vårt har begrensede skriftstiler, mens en utvikler trenger forskjellige skrifter for å legge til forskjønnelse i webappene sine. For å gjøre det, lar CSS oss bruke @font-face-regelen for å legge til tilpassede skrifter. Denne artikkelen har demonstrert @font-face-regelen som du kan tilpasse skriftstil i vår applikasjon.