Hvordan endre skriftstørrelse i HTML
Så i denne oppskrivningen vil vi se hvordan du endrer skriftstørrelse i HTML:
- Bruke piksler
- Bruker prosent %
- I henhold til skjermstørrelse
- Bruke flyktige enhetsverdi
Hvordan du endrer skriftstørrelse i HTML ved hjelp av fontstørrelsesegenskapen?
I HTML kan skriftstørrelse endres av CSSs fontstørrelse-egenskap. Font-size-egenskapen støtter en liste over alternativer for å endre skriftstørrelse i henhold til noen kriterier. Denne delen beskriver listen over mulige alternativer for fontstørrelsesegenskaper for å endre skriftstørrelse I HTML.
- Bruke piksler (PX)
Vi kan endre skriftstørrelse ved hjelp av CSS Font-size-egenskap og sette verdien i piksler. En piksel er en måleenhet for å spesifisere høyden, bredden, fontstørrelsen osv. Brukes av nettutviklere. 1 piksel representerer den 1/96. delen av en tomme på en skjerm. Følgende praktiske eksempel vil vise bruken av denne egenskapen med pikselverdier. Som standard er skriftstørrelsen 16 piksler.
Kode:
Dette er den normale skriftstørrelsen i et HTML -dokument.
Fontstørrelsen endres til 30 piksler ved hjelp av CSS Font-size-egenskap.
I denne koden skriver vi to avsnitt og endrer størrelsen på ett avsnitt til 25px ved å bruke CSS Font-size-egenskapen.
Produksjon:
Utgangen viser at skriftstørrelsen er vellykket endret i piksler.
- Bruker prosent %
Vi kan også endre skriftstørrelsen ved å angi verdien av CSS Font-size-egenskap i prosent mot HTML-dokumentet kroppsstørrelse som betyr når vi gir verdi i prosent det vil gå. La oss se på følgende eksempel for å forstå bedre.
Kode:
Dette er den normale skriftstørrelsen i et HTML -dokument.
Fontstørrelsen endres i prosent ved bruk av CSS Font-size-egenskap.
I denne koden oppretter vi to avsnitt og endrer størrelsen på andre ledd ved å bruke CSS Font-size-egenskap og setter verdien til 150 prosent.
Produksjon:
Denne utgangen viser at vi har endret skriftstørrelse ved å spesifisere verdien i prosent.
- Angi skriftstørrelsen i henhold til skjermstørrelsen
Fontstørrelse kan også endres dynamisk. Det betyr at fontstørrelsen endres i henhold til skjermstørrelsen dynamisk. For å endre fontstørrelse i henhold til skjermen vi bruker VW (ViewPort bredde). Følgende eksempel viser bruk av VW-verdier i CSS Font-size-egenskap.
Kode:
Dette er den normale skriftstørrelsen i et HTML -dokument.
Fontstørrelsen endres i prosent ved bruk av CSS Font-size-egenskap.
I denne koden oppretter vi to avsnitt og endrer størrelsen på ett avsnitt ved å bruke VW -verdi som vil endre størrelse på teksten i henhold til skjermstørrelsen.
Produksjon:
Utgangen viser at avsnittet med normal tekststørrelse forblir statisk, mens avsnittet som bruker VW Verdien for å endre skriftstørrelsen endrer seg selv i henhold til skjermen.
- Bruke den flyktige enhetsverdien
Vi kan endre skriftstørrelsen ved å bruke CSS Font-size-egenskapen og sette verdien til EM. Her sies det 1M å være lik HTML -dokumentets kroppens nåværende skriftstørrelse. Som standard er den normale HTML -dokumentfontstørrelsen 16 piksler, så vi kan si at 1EM = 16 piksler. Følgende praktiske eksempel viser bruken av EM -enhet.
Kode:
Dette er den normale skriftstørrelsen i HTML -dokumentet.
Fontstørrelsen endres i prosent ved bruk av CSS Font-size-egenskap.
I denne koden har vi endret størrelsen på avsnittet ved å bruke CSS Font-size-egenskap og sette verdien til 2 EM som er lik 32 piksler.
Produksjon:
Denne utgangen viser at vi har endret skriftstørrelse ved å bruke EM-verdien til CSS Font-size-egenskapen.
Værsågod! Du kan nå endre skriftstørrelsen i HTML ved å bruke noen av de ovennevnte metodene.
Konklusjon
I HTML kan vi endre størrelsen på skrifttypen ved å bruke CSS Font-størrelse egenskap og angi verdiene i piksler, prosent, Viewport-bredde og flyktig enhet. I denne artikkelen har vi gått gjennom alle verdisettene som kan brukes med CSS Font-size-egenskap for å endre størrelsen på skriften i HTML. Pikslene, prosentandelen og EM er de faste verdiene, mens Viewport -alternativet manipulerer skriften i henhold til skjermstørrelsen.