Den font-sizeegenskab angiver størrelsen, eller højde, på skrifttypen. font-sizepåvirker ikke kun den skrifttype, som den er anvendt på, men bruges også til at beregne værdien af em, rem og ex længdenheder.
p ( font-size: 20px; )font-sizekan acceptere nøgleord, længdeenheder eller procenter som værdier. Det er dog vigtigt at bemærke, at når det erklæres som en del af fontstenografi-ejendommen, font-sizeer det en obligatorisk værdi. Hvis den ikke er inkluderet i stenografien, ignoreres hele linjen.
Længdeværdier (f.eks. Px, em, rem, ex osv.), Der anvendes på, font-sizekan ikke være negative.
Absolutte nøgleord og værdier
.element ( font-size: small; )Det accepterer følgende absolutte søgeordsværdier:
xx-smallx-smallsmallmediumlargex-largexx-large
Disse absolutte værdier kortlægges til specifikke skriftstørrelser som beregnet af browseren. Men du kan også bruge to nøgleordsværdier, der er relative til skrifttypestørrelsen på det overordnede element.
Andre absolutte værdier inkluderer mm(millimeter), cm(centimeter), in(inches), pt(point) og pc(picas). Et punkt er lig med 1/72 tomme, mens en pica er lig med 12 point - disse værdier bruges typisk til trykte dokumenter.
Relative nøgleord
.element ( font-size: larger; )largersmaller
For eksempel, hvis det overordnede element har en skriftstørrelse på small, vil et underordnet element med en defineret relativ størrelse på largergøre skriftstørrelsen lig med mediumfor underelementet.
Procentværdier
.element ( font-size: 110%; )Procentværdier, såsom at indstille en skriftstørrelse på 110%, er også i forhold til det overordnede elements skriftstørrelse som vist i nedenstående demo:
Se pennen qdbELL af CSS-Tricks (@ css-tricks) på CodePen.
Em-enheden
.element ( font-size: 2em; )Em-enheden er en relativ enhed baseret på den beregnede værdi af fontelementet for det overordnede element. Dette betyder, at underordnede elementer altid er afhængige af deres forælder for at indstille deres 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 har afsnittet en skriftstørrelse på 16 pixel, fordi 1 x 16 = 16 pixel, mens overskriften vil være 32 pixel, fordi 2 x 16 = 32 pixel. Der er mange fordele ved at skalere typen op afhængigt af forældreelementets fontstørrelse, nemlig at vi kan pakke elementer ind i en container og vide, at alle børn altid vil være i forhold til hinanden:
Se pennen Find ud af, hvordan em-enheden fungerer ved CSS-Tricks (@ css-tricks) på CodePen.
Rem-enheden
I tilfælde af rem-enheder afhænger fontstørrelsen dog af værdien af rodelementet (eller htmlelementet).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )I ovenstående eksempel er rem-enheden lig med 16 pixel (fordi den arves fra html/ root-elementet), og skriftstørrelsen for alle afsnitselementer beregnes således til 24 pixel (1,5 x 16 = 24). I modsætning til em-enheder ignorerer afsnittet stylingen af alle dets forældre udover roden.
Denne enhed understøttes af følgende browsere:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | Arbejder | Arbejder | Arbejder | 10+ | Arbejder | Arbejder |
Den tidligere enhed
.element ( font-size: 20ex; )For ex-enheder ville 1ex være lig med den beregnede højde på små bogstaver x på rodelementet. Så i eksemplet nedenfor er htmlelementet indstillet til, 20pxog alle de andre skrifttypestørrelser bestemmes af x-højden af den pågældende skrifttype.
Se pennen Find ud af, hvordan ex-enheden fungerer af CSS-Tricks (@ css-tricks) på CodePen.
Eksperimenter med demoen over min udskiftning af font-familypå htmlelementet for at se, hvordan den anden font-størrelser forandring.
Viewport enheder
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Viewport-enheder, såsom vwog vh, indstiller fontens størrelse på et element i forhold til visningsportens dimensioner:
- 1vw = 1% af visningsbredden
- 1vh = 1% af visningshøjden
Så hvis vi tager følgende eksempel:
.element ( font-size: 100vh; )Derefter vil dette sige, at elementets fontstørrelse altid skal være 100% af visningsportens højde (50vh ville være 50%, 15vh ville være 15% og så videre). I nedenstående demo kan du prøve at ændre størrelsen på eksemplet for at se typen strække:
Se penstørrelsestypen med vh-enheder fra CSS-Tricks (@ css-tricks) på CodePen.
vw enheder er forskellige, idet det indstiller bogstavformernes højde efter visningsportens bredde, så i demoen nedenfor skal du ændre størrelsen på browservinduet vandret for at se disse ændringer:
Se penstørrelsestypen med vw-enheder af CSS-Tricks (@ css-tricks) på CodePen.
Disse enheder understøttes af følgende browsere:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Det er vigtigt at bemærke, at der er to andre visningsenheder: vminog vmax. Den første finder værdierne for vhog vwindstiller skriftstørrelsen som den mindste af de to, mens den vmaxindstiller skriftstørrelsen til den største af disse to værdier.
CH-enheden
.element ( font-size: 24ch; )Den chenhed svarer til den exenhed, idet den vil sætte skriftstørrelse af et element i forhold til bredden af 0 (nul) glyf af skrift:
Se penstørrelsestypen med ch-enheder fra CSS-Tricks (@ css-tricks) på CodePen.
Denne enhed understøttes af:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Arbejder | 10+ | Arbejder | 9+ | Arbejder | Arbejder |