Proprietà font-size

La proprietà font-size imposta la dimensione del carattere del testo. I valori della proprietà sono qualsiasi unità per le dimensioni (di solito, sono px, em o rem) o parole chiave speciali (usate molto raramente).

Sintassi

cssselettore {
  font-size: valore;
}

Valori sotto forma di parole chiave

Valore predefinito: medium.

Esempio

Impostiamo la dimensione del carattere dei paragrafi a 20px:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

Esempio

In questo esempio, per il paragrafo è impostata una dimensione di 16px, e per lo span al suo interno - 150%. In questo caso la dimensione del carattere per lo span sarà il 150% del suo genitore, cioè del paragrafo, e la sua dimensione reale sarà 16px * 150% = 24px:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Esempio

In questo esempio, per il paragrafo è impostata una dimensione di 16px, e per il span al suo interno - larger. In questo caso la dimensione del carattere per il span sarà più grande di quella del suo genitore (il paragrafo):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Esempio

Fare attenzione al fatto che caratteri con diversa font-family e stesso font-size visivamente possono essere di dimensioni completamente diverse (per risolvere questo problema vedere la proprietà font-size-adjust).

Nell'esempio seguente ad entrambi i paragrafi è impostato font-size a 16px, ma diversa font-family:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: