Proprietà font-family

La proprietà font-family imposta il tipo di carattere.

Sintassi

selettore {
	font-family: nome del carattere;
}

Nota

Se il nome del carattere contiene spazi, ad esempio, Times New Roman, deve essere racchiuso in apici singoli o doppi.

Nota

È possibile elencare più caratteri simili separati da virgola. Quando il browser incontra il primo carattere nell'elenco, verifica la sua presenza sul computer dell'utente. Se tale carattere non è presente, viene preso il carattere successivo nell'elenco e viene analizzato anch'esso per la presenza. Pertanto, specificare più caratteri aumenta la probabilità che almeno uno di essi venga trovato sul computer client.

L'elenco di solito termina con una parola chiave, che descrive il tipo di carattere (tutti i caratteri appartengono a un qualche tipo) - serif, sans-serif, cursive, fantasy o monospace. Se il browser non trova nessuno dei caratteri specificati sul computer dell'utente, allora sceglierà uno dei caratteri del tipo specificato.

Tipi di carattere

Tipo	Descrizione
`serif`	Carattere con grazie (serif).
`sans-serif`	Carattere senza grazie (sans-serif).
`cursive`	Carattere corsivo.
`fantasy`	Carattere decorativo con belle volute ed effetti insoliti.
`monospace`	Carattere monospazio, in cui la larghezza di ogni carattere è uguale.

Valore predefinito: carattere impostato nel browser per default. Di solito è Times New Roman.

Esempio

Assegniamo al carattere la famiglia Arial:

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

p {
	font-family: Arial;
}

Esempio

Assegniamo al carattere la famiglia Times New Roman. Poiché il nome del carattere è composto da più parole, lo racchiudiamo tra virgolette:

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

p {
	font-family: "Times New Roman";
}

Esempio

Assegniamo al carattere un carattere del gruppo serif (molto probabilmente verrà preso Times New Roman):

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

p {
	font-family: serif;
}

Esempio

Assegniamo al carattere un carattere del gruppo sans-serif (molto probabilmente verrà preso Arial):

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

p {
	font-family: sans-serif;
}

Esempio

Assegniamo al carattere un carattere del gruppo fantasy (potrebbe non funzionare per l'assenza di tale carattere):

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

p {
	font-family: fantasy;
}

Esempio

Assegniamo al carattere un carattere del gruppo monospace (le lettere diventeranno della stessa larghezza):

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

p {
	font-family: monospace;
}