font-sizeProprietatea specifică mărimea sau înălțimea, a fontului. font-sizeafectează nu numai fontul la care este aplicat, ci este, de asemenea, utilizat pentru a calcula valoarea unităților de lungime em, rem și ex.
p ( font-size: 20px; )font-sizepoate accepta cuvinte cheie, unități de lungime sau procente ca valori. Cu toate acestea, este important să rețineți că, atunci când este declarat ca parte a fontproprietății de prescurtare, font-sizeeste o valoare obligatorie. Dacă nu este inclus în stenogramă, întreaga linie este ignorată.
Valorile lungimii (de ex. Px, em, rem, ex etc.) cărora li se aplică font-sizenu pot fi negative.
Cuvinte cheie și valori absolute
.element ( font-size: small; )Acceptă următoarele valori absolute ale cuvintelor cheie:
xx-smallx-smallsmallmediumlargex-largexx-large
Aceste valori absolute sunt mapate la dimensiuni de font specifice, calculate de browser. Dar puteți utiliza și două valori ale cuvintelor cheie care sunt relative la dimensiunea fontului elementului părinte.
Alte valori absolute includ mm(milimetri), cm(centimetri), in(țoli), pt(puncte) și pc(picas). Un punct este egal cu 1/72 de inch, în timp ce un pica este egal cu 12 puncte - aceste valori sunt de obicei utilizate pentru documentele tipărite.
Cuvinte cheie relative
.element ( font-size: larger; )largersmaller
De exemplu, dacă elementul părinte are o dimensiune de font de small, un element copil cu o dimensiune relativă definită de largerva face ca dimensiunea fontului să fie egală cu mediumpentru elementul copil.
Valori procentuale
.element ( font-size: 110%; )Valorile procentuale, cum ar fi setarea unei dimensiuni de font de 110%, sunt, de asemenea, relative la dimensiunea fontului elementului părinte, așa cum se arată în demonstrația de mai jos:
Vedeți Pen qdbELL de CSS-Tricks (@ css-tricks) pe CodePen.
Unitatea em
.element ( font-size: 2em; )Unitatea em este o unitate relativă bazată pe valoarea calculată a dimensiunii fontului elementului părinte. Aceasta înseamnă că elementele copil sunt întotdeauna dependente de părintele lor pentru a-și seta dimensiunea fontului. De exemplu:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )În exemplul de mai sus, paragraful va avea dimensiunea fontului de 16 px, deoarece 1 x 16 = 16 px, în timp ce titlul va fi 32 px, deoarece 2 x 16 = 32 px. Există numeroase avantaje în ceea ce privește mărirea tipului în funcție de dimensiunea fontului elementului părinte, și anume putem înfășura elemente într-un container și știm că toți copiii vor fi întotdeauna în relație unul cu altul:
Vedeți stiloul pentru a afla cum funcționează unitatea em de CSS-Tricks (@ css-tricks) pe CodePen.
Unitatea rem
Cu toate acestea, în cazul unităților rem, dimensiunea fontului depinde de valoarea elementului rădăcină (sau al htmlelementului).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )În exemplul de mai sus, unitatea rem este egală cu 16 px (deoarece este moștenită din elementul html/ root) și, astfel, dimensiunea fontului pentru toate elementele de paragraf se va calcula la 24 px (1,5 x 16 = 24). Spre deosebire de unitățile em, paragraful va ignora stilul tuturor părinților săi în afară de rădăcină.
Această unitate este acceptată de următoarele browsere:
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lucrări | Lucrări | Lucrări | Lucrări | Peste 10 ani | Lucrări | Lucrări |
Fosta unitate
.element ( font-size: 20ex; )Pentru ex unități, 1ex ar fi egală cu înălțimea calculată a literei mici a elementului rădăcină. Deci, în exemplul de mai jos, htmlelementul este setat la 20pxși toate celelalte dimensiuni ale fontului sunt determinate de înălțimea x a respectivului font.
Vedeți stiloul pentru a afla cum funcționează ex-unitatea prin CSS-Tricks (@ css-tricks) pe CodePen.
Experimentați cu demonstrația de mai sus, înlocuind elementul de font-familype htmlelement pentru a vedea cum se schimbă celelalte dimensiuni ale fontului.
Unități de vizualizare
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Unitățile de ferestre , cum ar fi vwși vh, setează dimensiunea fontului unui element în raport cu dimensiunile ferestrei:
- 1vw = 1% din lățimea ferestrei
- 1vh = 1% din înălțimea ferestrei
Deci, dacă luăm următorul exemplu:
.element ( font-size: 100vh; )Apoi, acest lucru va indica faptul că dimensiunea fontului elementului ar trebui să fie întotdeauna 100% din înălțimea ferestrei în orice moment (50vh ar fi 50%, 15vh ar fi 15% și așa mai departe). În demonstrația de mai jos, încercați să redimensionați înălțimea exemplului pentru a urmări întinderea tipului:
Vedeți tipul de dimensionare a stiloului cu unități vh de CSS-Tricks (@ css-tricks) pe CodePen.
vw unitățile sunt diferite prin faptul că setează înălțimea formelor de litere în funcție de lățimea ferestrei, așa că în demonstrația de mai jos va trebui să redimensionați fereastra browserului orizontal pentru a vedea aceste modificări:
Vedeți tipul de dimensionare stilou cu unități vw de CSS-Tricks (@ css-tricks) pe CodePen.
Aceste unități sunt acceptate de următoarele browsere:
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | Peste 27 de ani | 9+ | 4.4+ | 7.1+ |
Este important să rețineți că există alte două unități de vizualizare: vminși vmax. Primul va găsi valorile vhși vwși va seta dimensiunea fontului ca fiind cea mai mică dintre cele două, în timp ce vmaxsetează dimensiunea fontului la cea mai mare dintre aceste două valori.
Unitatea ch
.element ( font-size: 24ch; )chUnitatea este similar cu exunitatea în care va seta font-dimensiunea unui element în raport cu lățimea 0 glyph (zero) a fontului:
Vedeți tipul de dimensionare stilou cu unități ch de CSS-Tricks (@ css-tricks) pe CodePen.
Această unitate este susținută de:
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Peste 27 de ani | Lucrări | Peste 10 ani | Lucrări | 9+ | Lucrări | Lucrări |