La font-sizeproprietà specifica la dimensione o l'altezza del carattere. font-sizeinfluisce non solo sul carattere a cui è applicato, ma è anche usato per calcolare il valore delle unità di lunghezza em, rem ed ex.
p ( font-size: 20px; )font-sizepuò accettare parole chiave, unità di lunghezza o percentuali come valori. È importante notare, tuttavia, che quando è dichiarato come parte della fontproprietà di stenografia, font-sizeè un valore obbligatorio. Se non è inclusa nell'abbreviazione, l'intera riga viene ignorata.
I valori di lunghezza (ad esempio px, em, rem, ex, ecc.) A cui vengono applicati font-sizenon possono essere negativi.
Parole chiave e valori assoluti
.element ( font-size: small; )Accetta i seguenti valori di parole chiave assolute:
xx-smallx-smallsmallmediumlargex-largexx-large
Questi valori assoluti vengono mappati a dimensioni di caratteri specifiche come calcolate dal browser. Ma puoi anche utilizzare due valori di parole chiave relativi alla dimensione del carattere dell'elemento genitore.
Altri valori assoluti includono mm(millimetri), cm(centimetri), in(pollici), pt(punti) e pc(picas). Un punto è uguale a 1/72 di pollice mentre una pica è uguale a 12 punti - questi valori sono tipicamente usati per i documenti stampati.
Parole chiave relative
.element ( font-size: larger; )largersmaller
Ad esempio, se l'elemento genitore ha una dimensione del carattere di small, un elemento figlio con una dimensione relativa definita di largerrenderà la dimensione del carattere uguale a mediumper l'elemento figlio.
Valori percentuali
.element ( font-size: 110%; )I valori percentuali, come l'impostazione di una dimensione del carattere del 110%, sono anche relativi alla dimensione del carattere dell'elemento genitore, come mostrato nella demo di seguito:
Vedi Pen qdbELL di CSS-Tricks (@ css-tricks) su CodePen.
L'unità em
.element ( font-size: 2em; )L'unità em è un'unità relativa basata sul valore calcolato della dimensione del carattere dell'elemento genitore. Ciò significa che gli elementi figlio dipendono sempre dal genitore per impostare la dimensione del carattere. Per esempio:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Nell'esempio sopra, il paragrafo avrà una dimensione del carattere di 16px perché 1 x 16 = 16px mentre l'intestazione sarà di 32px perché 2 x 16 = 32px. Ci sono molti vantaggi nel ridimensionare il testo a seconda della dimensione del carattere dell'elemento genitore, vale a dire che possiamo avvolgere gli elementi all'interno di un contenitore e sapere che tutti i figli saranno sempre relativi l'uno all'altro:
Guarda la penna Capire come funziona l'unità em di CSS-Tricks (@ css-tricks) su CodePen.
L'unità rem
Nel caso delle unità rem, tuttavia, la dimensione del carattere dipende dal valore dell'elemento radice (o htmldell'elemento).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Nell'esempio sopra, l'unità rem è uguale a 16px (perché è ereditata dall'elemento html/ root) e quindi la dimensione del carattere per tutti gli elementi del paragrafo verrà calcolata a 24px (1,5 x 16 = 24). A differenza delle unità em, il paragrafo ignorerà lo stile di tutti i suoi genitori oltre alla radice.
Questa unità è supportata dai seguenti browser:
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | Lavori | Lavori | 10+ | Lavori | Lavori |
L'ex unità
.element ( font-size: 20ex; )Per le unità ex, 1ex sarebbe uguale all'altezza calcolata della lettera minuscola x dell'elemento radice. Quindi nell'esempio sotto l' htmlelemento è impostato su 20pxe tutte le altre dimensioni dei caratteri sono determinate dall'altezza x di quel particolare carattere.
Guarda la penna Capire come funziona l'unità ex da CSS-Tricks (@ css-tricks) su CodePen.
Esperimento con la demo sopra la mia sostituzione del font-familysul htmlelemento per vedere come l'altra font-dimensioni cambiamento.
Unità viewport
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Le unità della vista, come vwe vh, impostano la dimensione del carattere di un elemento rispetto alle dimensioni della vista:
- 1vw = 1% della larghezza dell'area visibile
- 1vh = 1% dell'altezza del viewport
Quindi, se prendiamo il seguente esempio:
.element ( font-size: 100vh; )Quindi questo affermerà che la dimensione del carattere dell'elemento dovrebbe sempre essere il 100% dell'altezza del viewport in ogni momento (50vh sarebbe 50%, 15vh sarebbe 15% e così via). Nella demo qui sotto prova a ridimensionare l'altezza dell'esempio per vedere il tipo stretch:
Vedere il tipo di dimensionamento della penna con unità vh di CSS-Tricks (@ css-tricks) su CodePen.
vw le unità sono diverse in quanto imposta l'altezza delle forme delle lettere in base alla larghezza del viewport, quindi nella demo qui sotto dovrai ridimensionare la finestra del browser orizzontalmente per vedere queste modifiche:
Vedi il tipo di dimensionamento della penna con unità vw di CSS-Tricks (@ css-tricks) su CodePen.
Queste unità sono supportate dai seguenti browser:
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
È importante notare che ci sono altre due unità di visualizzazione: vmine vmax. Il primo troverà i valori di vhe vwe imposterà la dimensione del carattere come il più piccolo dei due mentre vmaximposta la dimensione del carattere sul più grande di questi due valori.
L'unità ch
.element ( font-size: 24ch; )L' chunità è simile exall'unità in quanto imposterà la dimensione del carattere di un elemento in relazione alla larghezza del glifo 0 (zero) del carattere:
Vedi il tipo di dimensionamento della penna con unità ch di CSS-Tricks (@ css-tricks) su CodePen.
Questa unità è supportata da:
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Lavori | 10+ | Lavori | 9+ | Lavori | Lavori |