In una pagina web, è importante attribuire diversi stili ai testi. Anche in questo caso, possiamo usare il potente linguaggio CSS grazie ad alcune proprietà molto utilizzate: font-size, font-weight e font-style. Vediamo come funzionano.
Nelle pagine web, può essere importante scegliere la dimensione del carattere. La proprietà CSS da utilizzare è font-size. Puoi scegliere una qualsiasi unità di misura per questa proprietà.
Tuttavia, ti consigliamo sempre di utilizzare <h1> - <h6> (di cui abbiamo parlato nella lezione dei titoli HTML) per i titoli, invece che font-size. Lo consigliamo perché i motori di ricerca, come Google, utilizzano i tag HTML per sapere quali sono i titoli e qual è il testo di una pagina web.
Ecco un esempio di font-size:
<p>Un testo grande</p>
<style>
p {
font-size: 40px;
}
</style>Nota: se non viene definita una dimensione ad un testo, gli verrà attribuita quella di default: in genere 1em (che equivale a 16px).
Come abbiamo già visto, le unità di misura relative sono quelle che si adattano alla dimensione di altri elementi o alla dimensione della finestra del browser. Per questo, sono molto utili per le pagine web.
L'unità di misura vw significa "viewport width", ovvero lunghezza dal viewport (la finestra del browser). Se utilizziamo questa unità di misura, il testo cambierà in base alla larghezza della finestra del browser.
<p>Un testo che cambia in base alla larghezza dello schermo</p>
<style>
p {
font-size: 4vw;
}
</style>Possiamo cambiare lo spessore del testo per dare maggiore o minore importanza a specifiche parole o frasi, ad esempio tramite il grassetto. Per fare ciò, usiamo la proprietà font-weight.
Anche in questo caso, per il grassetto consigliamo di usare <b> o <strong> (di cui abbiamo parlato nella lezione HTML) invece che font-weight. In questo modo, i motori di ricerca (come Google) riescono a capire quali parti di testo sono più importanti.
La proprietà font-weight accetta questi valori:
normal, valore predefinito che corrisponde a 400.bold, valore del grassetto che corrisponde a 700.lighter, un valore dello spessore in meno rispetto all'elemento contenitore.bolder, un valore dello spessore in più rispetto all'elemento contenitore.Ecco un esempio:
.p1 {
font-size: bold; /* Grassetto (700) */
}
.p2 {
font-size: 400; /* Normale (puoi usare anche normal) */
}
.p3 {
font-size: 200; /* Sottile */
}Nota: non è detto che puoi usare tutti gli spessori (1-1000) in tutti i font: alcuni ne sono sprovvisti. Ti consigliamo di usare soltanto quelli principali: 400 e 700.
La proprietà font-style permette di attribuire ai testi il carattere italic (o corsivo), ovvero quello obliquo: ad esempio, questo testo è in italic.
I valori accettati sono tre:
normal, il testo è mostrato normalmente.italic, il testo è mostrato in corsivo.oblique, il testo è mostrato in obliquo.Il valore oblique è molto simile a italic, ma è meno supportato dai browser. È più consigliato usare italic.
Vediamo un esempio:
.p1 {
font-style: normal; /* Il testo è normale */
}
.p2 {
font-style: italic; /* Il testo è in corsivo/italic */
}
.p3 {
font-style: oblique; /* Il testo è obliquo */
}