Proprietà abbreviata font in CSS

Nella lezione precedente abbiamo analizzato molte proprietà per il testo. Spesso è abbastanza oneroso scrivere separatamente ciascuna di queste proprietà, quindi in CSS per maggiore comodità esiste una speciale proprietà abbreviata font. Questa proprietà permette di impostare contemporaneamente la dimensione del font, la famiglia, il grassetto, il corsivo e l'interlinea.

La proprietà descritta ha la seguente sintassi:

font-style font-weight font-size / line-height font-family

In questo caso l'ordine delle proprietà ha importanza, e sono obbligatorie font-size e font-family. Notate che altre proprietà, oltre a quelle descritte sopra nella sintassi, non sono incluse in questa proprietà abbreviata.

Vediamo alcuni esempi.

Esempio

Supponiamo di avere i seguenti stili:

p {
	font-size: 16px;
	font-family: Arial;
}

Riscriviamoli utilizzando la proprietà abbreviata:

p {
	font: 16px Arial;
}

Esempio

Supponiamo di avere i seguenti stili:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

Riscriviamoli utilizzando la proprietà abbreviata:

p {
	font: 16px/50px Arial;
}

Esempio

Supponiamo di avere i seguenti stili:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

Riscriviamoli utilizzando la proprietà abbreviata:

p {
	font: bold 16px Arial;
}

Esempio

Supponiamo di avere i seguenti stili:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

Riscriviamoli utilizzando la proprietà abbreviata:

p {
	font: bold italic 16px/50px Arial;
}

Compiti pratici

Accorcia il codice, utilizzando la proprietà abbreviata font:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

Accorcia il codice, utilizzando la proprietà abbreviata font:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

Accorcia il codice, utilizzando la proprietà abbreviata font:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}