I caratteri (Fonts) HTML

I fonts svolgono un ruolo molto importante nel rendere un sito più facile da usare e aumentarne la leggibilità dei contenuti. Il tipo di carattere e il colore dipende interamente dal computer e dal browser che viene utilizzato per visualizzare la pagina, ma è possibile utilizzare il tag HTML  per aggiungere stili diversi, dimensione e colore al testo. È possibile utilizzare un tag <basefont> per impostare tutto il testo alla stessa dimensione, tipo e colore.

Il tag font può avere tre attributi che ne consentono la personalizzazione e sono size, color, e face. Per modificare uno degli attributi del carattere in qualsiasi momento all' interno della tua pagina web, è sufficiente utilizzare il tag . Il testo che segue seguirà le direttive impostate finché non ci sarà il tag di chiusura tag. È possibile modificare uno o tutti gli attributi del carattere all'interno di un tag .

Note: I tag font e basefont sono obsoleti e si presume che verranno rimossi nelle versioni di HTML future. Perciò si consiglia di non utilizzarli e al loro posto personalizzare i font tramite i fogli di stile CSS. Perciò analizzeremo gli attributi dei tag font e basefont per solo scopo didattico.

Impostare la Dimensione del Font

È possibile impostare la dimensione del font tramite l' attributo size. Il range di valori accettato è compreso tra 1 (il più piccolo) e 7 (il più grande). Il font di default è impostato a 3.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>
</body>
</html>

Produrrà il seguente risultato:

Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

Dimensione del Font Relativa

Si può specificare quanto più grande o più piccolo dev' essere il font in relazione alla dimensione attuale. Si può specificare ad esempio con  o 

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size="-1">Font size="-1"</font><br />
<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font><br />
<font size="+4">Font size="+4"</font>
</body>
</html>

Produrrà il seguente risultato:

Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"

Impostare il Tipo di Font

Si può impostare il carattere da utilizzare tramite l' attributo face, bisogna tenere in considerazione che se l' utente che visualizza la pagina non ha il font installato nel proprio computer, non sarà in grado di vedere il font stabilito dall' attributo, ma vedrà un font di defaul stabilito dal computer.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font><br />
</body>
</html>

Produrrà il seguente risultato:

Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

Definire Font Alternativi

Come abbiamo detto un visitatore potrà vedere il tipo di font definito solo se ce l' ha installato nel proprio computer. È però possibile definire due o più tipi di font alternativi elencandoli separati da una virgola.

<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

Quando la pagina sarà caricata, il browser mostrerà il primo font disponibile. Se non ce n' è disponibile nessuno fra quelli elencati nell' attributo, il testo verrà visualizzato con il carattere di default Times New Roman.

Note: Un elenco completo dei font è disponibile nella pagina HTML Standard Fonts.

Impostare il Colore del Font

Tramite l' attributo color è possibile impostare qualsiasi colore si desideri. È possibile specificare il colore sia tramite il nome del colore che tramite il suo valore esadecimale.

Note: Qui è possibile visualizzare un elenco completo dei colori HTML Color Name with Codes.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>

Produrrà il seguente risultato:

This text is in pink
This text is red

L' Elemento <basefont>:

L' elemento <basefont> serve a definire una dimensione, colore, e tipo di carattere di default per ogni parte del documento che non è gestita da un tag . È possibile utilizzare gli elementi per sovrascrivere le impostazione dell' elemento <basefont>.

Anche il tag <basefont> supporta gli attributi color, size, face e le dimensioni relative dando come valori ad esempio +1 per una dimensione maggiore o -2 per una dimensione di due punti minore.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>

<h2>Example of the &lt;basefont&gt; Element</h2>
<p><font size="+2" color="darkgray">
This is darkgray text with two sizes larger
</font></p>

<p><font face="courier" size="-1" color="#000000">
It is a courier font, a size smaller and black in color.
</font></p>

</body>
</html>

Produrrà il seguente risultato:

This is the page's default font.

Esempio di Elemento <basefont>

This is darkgray text with two sizes larger

It is a courier font, a size smaller and black in color.