De font-sizeeigenschap specificeert de grootte of hoogte van het lettertype. font-sizebeïnvloedt niet alleen het lettertype waarop het wordt toegepast, maar wordt ook gebruikt om de waarde van em-, rem- en ex-lengte-eenheden te berekenen.
p ( font-size: 20px; )font-sizekan trefwoorden, lengte-eenheden of percentages accepteren als waarden. Het is echter belangrijk op te merken dat wanneer het wordt gedeclareerd als onderdeel van de fontsteno-eigenschap, font-sizedit een verplichte waarde is. Als het niet in de steno staat, wordt de hele regel genegeerd.
Lengtewaarden (bijv. Px, em, rem, ex, enz.) Waarop wordt toegepast, font-sizekunnen niet negatief zijn.
Absolute trefwoorden en waarden
.element ( font-size: small; )Het accepteert de volgende absolute trefwoordwaarden:
xx-smallx-smallsmallmediumlargex-largexx-large
Deze absolute waarden worden toegewezen aan specifieke lettergroottes zoals berekend door de browser. Maar u kunt ook twee trefwoordwaarden gebruiken die relatief zijn aan de lettergrootte van het bovenliggende element.
Andere absolute waarden zijn mm(millimeters), cm(centimeters), in(inches), pt(punten) en pc(pica's). Eén punt is gelijk aan 1/72 inch, terwijl één pica gelijk is aan 12 punten - deze waarden worden meestal gebruikt voor afgedrukte documenten.
Relatieve zoekwoorden
.element ( font-size: larger; )largersmaller
Als het bovenliggende element bijvoorbeeld een lettergrootte heeft van small, zal een onderliggend element met een gedefinieerde relatieve grootte van largerde lettergrootte gelijk maken aan die mediumvan het onderliggende element.
Percentage waarden
.element ( font-size: 110%; )Percentagewaarden, zoals het instellen van een lettergrootte van 110%, zijn ook relatief ten opzichte van de lettergrootte van het bovenliggende element, zoals weergegeven in de onderstaande demo:
Zie de Pen qdbELL door CSS-Tricks (@ css-tricks) op CodePen.
De em-eenheid
.element ( font-size: 2em; )De em-eenheid is een relatieve eenheid op basis van de berekende waarde van de lettergrootte van het bovenliggende element. Dit betekent dat onderliggende elementen altijd afhankelijk zijn van hun ouder om hun lettergrootte in te stellen. Bijvoorbeeld:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )In het bovenstaande voorbeeld heeft de alinea een lettergrootte van 16px omdat 1 x 16 = 16px, terwijl de kop 32px is omdat 2 x 16 = 32px. Er zijn veel voordelen aan het opschalen van het type, afhankelijk van de lettergrootte van het bovenliggende element, namelijk we kunnen elementen in een container plaatsen en weten dat alle kinderen altijd relatief ten opzichte van elkaar zullen zijn:
Zie de pen Uitzoeken hoe de em-eenheid werkt door CSS-Tricks (@ css-tricks) op CodePen.
De rem-eenheid
Bij rem units is de font-size echter afhankelijk van de waarde van het root-element (of het htmlelement).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )In het bovenstaande voorbeeld is de rem-eenheid gelijk aan 16px (omdat deze wordt geërfd van het html/ root-element) en dus wordt de lettergrootte voor alle alinea-elementen berekend naar 24px (1.5 x 16 = 24). In tegenstelling tot em-eenheden negeert de alinea de stijl van al zijn ouders, behalve de root.
Dit toestel wordt ondersteund door de volgende browsers:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | 10+ | Werken | Werken |
De ex-eenheid
.element ( font-size: 20ex; )Voor ex-eenheden is 1ex gelijk aan de berekende hoogte van de kleine letter x van het hoofdelement. Dus in het onderstaande voorbeeld is het htmlelement ingesteld op 20pxen worden alle andere lettergroottes bepaald door de x-hoogte van dat specifieke lettertype.
Zie de pen Uitzoeken hoe de ex-unit werkt door CSS-Tricks (@ css-tricks) op CodePen.
Experimenteer met de demo hierboven door het font-familyon the htmlelement te vervangen om te zien hoe de andere lettergroottes veranderen.
Viewport-eenheden
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Viewport-eenheden, zoals vwen vh, stellen de lettergrootte van een element in ten opzichte van de afmetingen van de viewport:
- 1vw = 1% van viewport-breedte
- 1vh = 1% van viewport-hoogte
Dus als we het volgende voorbeeld nemen:
.element ( font-size: 100vh; )Dit geeft dan aan dat de lettergrootte van het element altijd 100% van de hoogte van de viewport moet zijn (50vh zou 50% zijn, 15vh zou 15% zijn, enzovoort). Probeer in de onderstaande demo de hoogte van het voorbeeld aan te passen om het type stretch te bekijken:
Zie het type Pen Sizing met vh-eenheden door CSS-Tricks (@ css-tricks) op CodePen.
vw eenheden verschillen doordat het de hoogte van de lettervormen instelt op de breedte van de viewport, dus in de onderstaande demo moet je de grootte van het browservenster horizontaal aanpassen om deze wijzigingen te zien:
Zie het type Pen Sizing met vw-eenheden door CSS-Tricks (@ css-tricks) op CodePen.
Deze units worden ondersteund door de volgende browsers:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Het is belangrijk op te merken dat er twee andere viewport-eenheden zijn: vminen vmax. De eerste zal de waarden van vhen vinden vwen de font-size instellen als de kleinste van de twee, terwijl vmaxde font-size wordt ingesteld op de grootste van deze twee waarden.
De ch-eenheid
.element ( font-size: 24ch; )De cheenheid is vergelijkbaar met de exeenheid in die zin dat het de lettergrootte van een element zal instellen in relatie tot de breedte van de 0 (nul) glyph van het lettertype:
Zie het Pen Sizing-type met ch-eenheden door CSS-Tricks (@ css-tricks) op CodePen.
Dit toestel wordt ondersteund door:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Werken | 10+ | Werken | 9+ | Werken | Werken |