CSS-skriftstørrelsesvejledning - Sådan ændres tekststørrelse i HTML

Brug CSS- font-sizeegenskaben til at bestemme størrelsen på din tekst.

.container { font-size: 33px; } 

Denne egenskab tager flere typer værdier:

  • Nøgleord (nøgleord i absolut størrelse og relativ størrelse),
  • Længde (såsom pixels (px) og em-enheder) og
  • Procentdele.
.container { font-size: xx-large; } 

Spørgsmålet er: hvilken type værdi skal du vælge, og hvorfor?

Det er det spørgsmål, denne artikel tackler. Det viser dig, hvordan du bruger font-sizeejendommen og forskellene mellem dens mange værdier. Så næste gang du skal ændre skriftstørrelsen på din tekst, ved du, hvilken værdi du skal nå ud til.

Søgeordsværdier

Der er to typer søgeordsværdier, du kan bruge med skriftstørrelse: absolute-sizeog relative-sizenøgleord. Lad os starte med absolut.

Nøgleord i absolut størrelse

Koden nedenfor bruger nøgleordet i absolut størrelse smalltil at formatere HTML-teksten.

.childElement { font-size: small; } 

Der er flere nøgleordsmuligheder i absolut størrelse at vælge imellem:

  • xx-lille
  • x-lille
  • lille
  • medium
  • stor
  • x-stor
  • xx-stor
  • xxx-stor

Værdien af ​​et nøgleord i absolut størrelse bestemmes af browserens standard skriftstørrelse. Typisk er denne størrelse medium.

Nøgleord i relativ størrelse

Nøgleord i relativ størrelse er en anden mulighed for at overveje. Du har to at vælge imellem: smallerog larger.

.parentElement { font-size: smaller; } 

Skriftstørrelsen på et element med et nøgleord i relativ størrelse er relativ - større eller mindre - til dets overordnede skriftstørrelse.

Sagt på en anden måde, skriftstørrelsen på det overordnede element påvirker fontelementet på det underordnede element, som du kan se nedenfor.

I dette eksempel smalleranvendes nøgleordet i relativ størrelse på underelementet , og værdien i absolut størrelse largeanvendes på det overordnede element.

Længde Værdier

font-sizeaccepterer flere forskellige længdeværdier. Vi undersøger tre af dem: pixels (px) og em og rem enheder. På trods af dit valg skal den længde, du bruger, være positiv.

.parentElement { font-size: 60px; } 

Pixels

Pixels er en enhed med absolut længde. Det betyder, at de ikke påvirkes af andre elementer, som det overordnede element eller vinduesstørrelsen.

Som et resultat er pixels præcise: du definerer det nøjagtige antal pixels, du har brug for på et element, og det er typisk hvad du får. Der kan dog være små forskelle mellem browsere.

Bemærk, at de underordnede elementer bruger pixelsog har den samme skriftstørrelse i kodeeksemplet ovenfor.

EM'er

Mens du kan tænke på pixels som faste, så tænk på em-værdier som variable.

Det skyldes, at em-værdier er en relativ længdeenhed. Skriftstørrelsen på et element, der bruger en em-værdi, er i forhold til dets overordnede skrifttypestørrelse.  

Sig dog, at du ikke har angivet en skriftstørrelse for det overordnede element. Du har heller ikke indstillet et andet sted højere op i DOM. I dette tilfælde beregnes emværdien ved hjælp af browserens standard (ofte 16px).

Lad os gøre denne idé konkret.

Sig, at det overordnede element er indstillet til 30 pixel, og det underordnede element er indstillet til 2 em. Derefter er underordnet elementets gengivne skriftstørrelse 60 pixel (2 x 30 pixel = 60 pixel). Du kan se dette scenario i koden nedenfor.

em-værdier kan være problematiske på grund af deres sammensatte virkning, hvilket er demonstreret i det følgende eksempel.

Når du har flere elementer, der bruger em-værdier, der er indlejret i hinanden, sammensættes skriftstørrelsesværdierne: de bliver større og større. Dette er den sammensatte effekt i aktion.

REM'er

Indtast remværdier, som blev oprettet for at håndtere emsets sammensatte problem.

Husk at em-værdier er relative til det overordnede element. I modsætning hertil er rem-værdier i forhold til fontstørrelsen på rodelementet (html).  

Dette betyder, at du kan anvende en remværdi på et element, og det påvirkes ikke af forældrenes skriftstørrelse. Dette undgår den sammensatte effekt, vi oplevede ovenfor.

Dette eksempel bruger font-sizeegenskaben med en rem-værdi.

Her er et nøglepunkt fra ovenstående eksempel: skrifttypestørrelsen på det overordnede element påvirker ikke skriftstørrelsen på de underordnede elementer.

Procentdele

Procentdele giver endnu en måde at indstille skriftstørrelsen i forhold til det overordnede elements skriftstørrelse.

Elementet med procentdelen refererer til dets overordnede element for at bestemme dets skriftstørrelse. Procentværdien skal være positiv.

Her er et eksempel.

Som du kan se, har du masser af muligheder, der passer til dine behov, når det kommer til skriftstørrelse.

Jeg skriver om at lære at programmere og de bedste måder at gøre det på amymhaddad.com. Jegtweetogsåom programmering, læring og produktivitet: @amymhaddad.