Den font-sizeegenskapen angir størrelsen, eller høyde, på skriften. font-sizepåvirker ikke bare skrifttypen den er brukt på, men brukes også til å beregne verdien av em, rem og ex lengdenheter.
p ( font-size: 20px; )font-sizekan godta nøkkelord, lengdeenheter eller prosenter som verdier. Det er imidlertid viktig å merke seg at når det er erklært som en del av fontstenografi-eiendommen, font-sizeer det en obligatorisk verdi. Hvis det ikke er inkludert i stenografien, blir hele linjen ignorert.
Lengdeverdier (f.eks. Px, em, rem, ex osv.) Som brukes på font-sizekan ikke være negative.
Absolutte søkeord og verdier
.element ( font-size: small; )Den aksepterer følgende absolutte søkeordverdier:
xx-smallx-smallsmallmediumlargex-largexx-large
Disse absolutte verdiene er tilordnet til spesifikke skriftstørrelser som beregnet av nettleseren. Men du kan også bruke to søkeordverdier som er relative til skriftstørrelsen til det overordnede elementet.
Andre absolutte verdier inkluderer mm(millimeter), cm(centimeter), in(inches), pt(poeng) og pc(picas). Ett poeng er lik 1/72 av en tomme, mens en pica er lik 12 poeng - disse verdiene brukes vanligvis til trykte dokumenter.
Relative nøkkelord
.element ( font-size: larger; )largersmaller
For eksempel, hvis det overordnede elementet har en skriftstørrelse på small, vil et underordnet element med en definert relativ størrelse på largergjøre skriftstørrelsen lik mediumfor underelementet.
Prosentverdier
.element ( font-size: 110%; )Prosentverdier, for eksempel å sette en skriftstørrelse på 110%, er også i forhold til det overordnede elementets skriftstørrelse som vist i demoen nedenfor:
Se pennen qdbELL av CSS-Tricks (@ css-tricks) på CodePen.
Em-enheten
.element ( font-size: 2em; )Em-enheten er en relativ enhet basert på den beregnede verdien av skriftstørrelsen til det overordnede elementet. Dette betyr at underordnede elementer alltid er avhengige av foreldrene for å angi skriftstørrelse. For eksempel:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )I eksemplet ovenfor vil avsnittet ha en skriftstørrelse på 16px fordi 1 x 16 = 16px, mens overskriften vil være 32px fordi 2 x 16 = 32px. Det er mange fordeler med å skalere opp, avhengig av skriftstørrelsen til det overordnede elementet, nemlig at vi kan pakke inn elementer i en beholder og vite at alle barna alltid vil være i forhold til hverandre:
Se pennen Finne ut hvordan em-enheten fungerer av CSS-Tricks (@ css-tricks) på CodePen.
Rem-enheten
Når det gjelder rem-enheter, er imidlertid skriftstørrelsen avhengig av verdien av rotelementet (eller htmlelementet).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )I eksemplet ovenfor er rem-enheten lik 16px (fordi den er arvet fra html/ root-elementet), og dermed vil skriftstørrelsen for alle avsnittselementer beregne til 24px (1,5 x 16 = 24). I motsetning til em-enheter, vil avsnittet ignorere stylingen til alle foreldrene foruten roten.
Denne enheten støttes av følgende nettlesere:
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | Virker | Virker | Virker | 10+ | Virker | Virker |
Eksenheten
.element ( font-size: 20ex; )For eks-enheter vil 1ex være lik den beregnede høyden på små bokstaver x til rotelementet. Så i eksemplet nedenfor er htmlelementet satt til 20pxog alle de andre skriftstørrelsene bestemmes av x-høyden til den aktuelle fonten.
Se pennen Finne ut hvordan ex-enheten fungerer av CSS-Tricks (@ css-tricks) på CodePen.
Eksperimenter med demoen over å erstatte font-familypå htmlelementet for å se hvordan de andre skriftstørrelsene endres.
Visningsenheter
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Visningsenheter, for eksempel vwog vh, angir skriftstørrelsen til et element i forhold til visningsportens dimensjoner:
- 1vw = 1% av visningsportens bredde
- 1vh = 1% av visningshøyden
Så hvis vi tar følgende eksempel:
.element ( font-size: 100vh; )Da vil dette si at fontstørrelsen til elementet alltid skal være 100% av visningsportens høyde (50vh vil være 50%, 15vh vil være 15% og så videre). I demonstrasjonen nedenfor kan du prøve å endre størrelsen på eksemplet for å se typen strekke:
Se pennestørrelsestypen med vh-enheter av CSS-Tricks (@ css-tricks) på CodePen.
vw enhetene er forskjellige ved at den angir høyden på bokstavformene etter visningsportens bredde, så i demoen nedenfor må du endre størrelsen på nettleservinduet horisontalt for å se disse endringene:
Se pennestørrelsestypen med vw-enheter av CSS-Tricks (@ css-tricks) på CodePen.
Disse enhetene støttes av følgende nettlesere:
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Det er viktig å merke seg at det er to andre visningsenheter: vminog vmax. Den første finner verdiene til vhog vwog angir skriftstørrelsen som den minste av de to mens den vmaxstiller skriftstørrelsen til den største av disse to verdiene.
CH-enheten
.element ( font-size: 24ch; )Den chenhet er lik den exenhet i at det vil sette font-size av et element i forhold til bredden på 0 (null) glyph for skriften:
Se pennestørrelsestypen med ch-enheter av CSS-Tricks (@ css-tricks) på CodePen.
Denne enheten støttes av:
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Virker | 10+ | Virker | 9+ | Virker | Virker |