Dimensione carattere CSS
Dimensione del font
La font-sizeproprietà imposta la dimensione del testo.
Essere in grado di gestire la dimensione del testo è importante nel web design. Tuttavia, non dovresti usare le regolazioni della dimensione del carattere per far sembrare i paragrafi come intestazioni o le intestazioni come paragrafi.
Usa sempre i tag HTML appropriati, come <h1> - <h6> per i titoli e <p> per i paragrafi.
Il valore della dimensione del carattere può essere una dimensione assoluta o relativa.
Dimensione assoluta:
- Imposta il testo su una dimensione specificata
- Non consente a un utente di modificare la dimensione del testo in tutti i browser (non valido per motivi di accessibilità)
- La dimensione assoluta è utile quando si conosce la dimensione fisica dell'output
Dimensioni relative:
- Imposta la dimensione relativa agli elementi circostanti
- Consente a un utente di modificare la dimensione del testo nei browser
Nota: se non specifichi una dimensione del carattere, la dimensione predefinita per il testo normale, come i paragrafi, è 16px (16px=1em).
Imposta la dimensione del carattere con i pixel
L'impostazione della dimensione del testo con pixel ti dà il pieno controllo sulla dimensione del testo:
Esempio
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Suggerimento: se utilizzi i pixel, puoi comunque utilizzare lo strumento zoom per ridimensionare l'intera pagina.
Imposta la dimensione del carattere con Em
Per consentire agli utenti di ridimensionare il testo (nel menu del browser), molti sviluppatori usano em invece dei pixel.
1em è uguale alla dimensione del carattere corrente. La dimensione del testo predefinita nei browser è 16px. Quindi, la dimensione predefinita di 1em è 16px.
La dimensione può essere calcolata da pixel a em usando questa formula: pixel /16= em
Esempio
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Nell'esempio sopra, la dimensione del testo in em è la stessa dell'esempio precedente in pixel. Tuttavia, con la dimensione em, è possibile regolare la dimensione del testo in tutti i browser.
Sfortunatamente, c'è ancora un problema con le versioni precedenti di Internet Explorer. Il testo diventa più grande di quanto dovrebbe quando viene ingrandito e più piccolo di quanto dovrebbe quando viene ridotto.
Usa una combinazione di percentuale ed em
La soluzione che funziona in tutti i browser è impostare una dimensione del carattere predefinita in percentuale per l'elemento <body>:
Esempio
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Il nostro codice ora funziona alla grande! Mostra la stessa dimensione del testo in tutti i browser e consente a tutti i browser di ingrandire o ridimensionare il testo!
Dimensione carattere reattivo
La dimensione del testo può essere impostata con vwun'unità, che significa "larghezza finestra".
In questo modo la dimensione del testo seguirà la dimensione della finestra del browser:
Ciao mondo
Ridimensiona la finestra del browser per vedere come si ridimensiona la dimensione del carattere.
Esempio
<h1 style="font-size:10vw">Hello World</h1>
Viewport è la dimensione della finestra del browser. 1vw = 1% della larghezza della finestra. Se il viewport è largo 50 cm, 1vw è 0,5 cm.