I Cascading Style Sheets (CSS), Fontstørrelse eiendom har stor betydning. Det sikrer at teksten skiller seg ut og beriker arket med et visuelt hierarki. Hierarkiet hjelper til med å skille overskrifter og underoverskrifter fra normal tekst. CSS Font-size-egenskap bruker flere størrelsesenheter som Piksler, EM, bredde og prosentvise verdier. Dessuten bruker den også forskjellige overskrifter som spenner fra

til

.

Denne oppskrivningen vil diskutere eiendommen til fontstørrelse i CSS. Vi vil også lære hvordan du eksplisitt bruker Forhåndsdefinerte og tilpassede egenskaper for tekstelementer. Så la oss starte!

CSS Font-størrelse eiendom

I CSS brukes eiendommen “Forhåndsdefinert” eller “tilpasset størrelse”.

I de undergitte seksjonene vil vi kort snakke om de forhåndsdefinerte og tilpassede fontstørrelse CSS-verdiene i Font-størrelse egenskap.

CSS Font-size-egenskap ved bruk av forhåndsdefinerte verdier

CSS gir forhåndsdefinerte verdier for å sette fontstørrelser på tekster. CSS Font-size-egenskapen brukes når vi har informasjonen relatert til den fysiske størrelsen på utgangen. Dessuten tillater ikke nettlesere å endre tekststørrelsen på grunn av dårlige tilgjengelighetsgrunner.

Sjekk ut følgende liste over CSS forhåndsdefinerte eiendommer for fontstørrelse:

• XX-SMALL
• X-SMALL
• Liten
• Medium
• Stor
• X-stor
• Xx-stor

La oss nå se på syntaksen for å gi forhåndsdefinerte verdier til eiendommer for fontstørrelse:

Syntaks for å gi forhåndsdefinerte verdier til eiendommer

Font-størrelse: Medium | stor | x-stor | xx-stor | xx-small | x-small | liten |;

Her må vi legge til en spesifikk verdi for "skriftstørrelse" eiendom.

Eksempel: Tilveiebringe forhåndsdefinerte verdier til eiendommer

I dette eksemplet vil vi spesifisere forskjellige forhåndsdefinerte eiendommer for fontstørrelse for avsnittelementer:

Dette er xx-stor tekst.

Dette er X-stor tekst.

Dette er stor tekst.

Dette er middels tekst.

Dette er liten tekst.

Dette er x-lite tekst.

Dette er xx-lite tekst.

Åpne HTML -filen i en nettleser etter å ha lagt til den spesifiserte koden. Ved å gjøre det vil teksten til avsnittet ha følgende format:

I neste avsnitt vil vi demonstrere bruken av "tilpasset" Font-størrelse eiendomsverdier.

CSS Font-size-egenskap ved hjelp av tilpassede verdier

Ved å gi Tilpassede verdier til fontstørrelse-egenskapen, du kan stille inn størrelse av en skrift i henhold til de omkringliggende elementene, og denne egenskapen tillater også en bruker å endre skriftstørrelsen i nettlesere.

I CSS omfatter den fontstørrelsesegenskapen følgende tilpassede verdier:

• Fontstørrelse med piksler
• Fontstørrelse med dem
• Fontstørrelse med prosentvise verdier
• Responsiv fontstørrelse

CSS fontstørrelse med piksler

I denne metoden, “Piksler” brukes til å angi verdien av eiendommen. Det er en statisk verdi som er helt OS-uavhengig.

Eksempel: CSS fontstørrelse med piksler

Nå vil vi sette fontstørrelsen til avsnittselementene i henhold til forskjellige pikselverdier som for eksempel “50px”, “40px” og “30px”:

Vi tildeler "50px" til denne teksten.

Vi tildeler "40px" til denne teksten.

Vi tildeler "30px" til denne teksten.

Produksjon

Som du ser fra den gitte utgangen, settes av avsnittets tekststørrelse i henhold til spesifiserte pikselverdier.

CSS fontstørrelse med dem

De “Em” Verdier av CSS Font-størrelse eiendom brukes til å angi størrelsen på teksten i henhold til foreldres skriftstørrelse i nettlesere. Mange utviklere foretrekker “Em” over “Piksler” Fordi det tilbyr et godt kompatibilitetsnivå for nettleserne.

Merk: I en nettleser er standard tekststørrelse satt til 16 piksler og en em, som betyr at 1 em = 16 piksler.

Ta en titt på det undergitte eksemplet:

Eksempel: CSS Font-size-egenskap med EM

I dette eksemplet vil vi sette “Em” Verdi for tekstelementene som det samme som foregående eksempel. For å gjøre det, vil vi dele antall piksler med “16” og spesifiser deretter den resulterende verdien som Font-størrelse egenskapsverdi for de ekstra elementene:

Dette er på vei 1

Dette er på vei 2

Dette er et avsnitt.

Den gitte utgangen betyr at vi har brukt eiendommen “Em” verdier:

CSS Font-size-egenskap med prosentverdier

Vi kan også sette skriftstørrelsen med hensyn til prosentdel, og i denne metoden kan prosentandelen av font økes fra 100%.

Eksempel: CSS Font-size-egenskap med prosentverdier

Nå vil vi tilordne forskjellige prosentverdier til "skriftstørrelse" Egenskapene til avsnittelementene:

Dette har 130% tekststørrelse.

Dette har 120% tekststørrelse.

Dette har 90% tekststørrelse.

Dette har 70% tekststørrelse.

Produksjon

CSS Responsive Font-size-egenskap

Bruke CSS Responsiv fontstørrelse, Du kan også angi tekststørrelse i henhold til bredden på visningsporten til nettleservinduet. For dette formålet, “VW” enhetsverdien brukes, mens 1VW = 1% av utsiktsvidden.

Merk: Hvis brukeren ikke definerer skriftstørrelsen på tekst, er standardstørrelsen på en tekst lik 16 px eller 1em.

Eksempel: CSS Responsive Font-size-egenskap

Eksempel responsiv tekst

Endre størrelsen på nettleservinduet for å sjekke skalerbarheten til tekst.

Produksjon

I det ovennevnte eksemplet kan teksten endres i henhold til nettleseren, og den vil følge størrelsen på nettleservinduet.

Konklusjon

I CSS brukes eiendommen “Forhåndsdefinert” eller “Custom”. Flere måleenheter som for eksempel Piksler, EM, Viewport, bredde og prosentvise verdier er spesifisert som verdiene til fontstørrelsesegenskapen. Denne oppskrivningen diskuterte CSS Font-size-egenskap og demonstrerte metoden for å eksplisitt bruke forhåndsdefinert og tilpasset eiendommer Verdier for tekstelementer.