Tag HTML <font>
Il tag <font> obsoleto impostava dimensione, carattere e colore del testo. Scopri perché è stato rimosso in HTML5 e come sostituirlo con CSS color, font-family e font-size.
Il tag <font> veniva utilizzato per controllare la dimensione, il colore e il carattere tipografico del testo tramite i suoi attributi size, color e face. Questa pagina spiega perché non dovresti mai usarlo nel codice nuovo, come leggere il markup legacy con <font> e come sostituire esattamente ogni attributo con CSS moderno.
Il tag <font> è obsoleto. È stato rimosso dallo standard HTML5 ed è un tag HTML deprecato. Non utilizzarlo. Utilizza invece CSS per applicare stili al testo.
Perché <font> è obsoleto
<font> è stato deprecato perché mescola la presentazione (l'aspetto del testo) con il contenuto (il testo stesso). Lo sviluppo web moderno separa queste responsabilità: HTML descrive la struttura e il significato, mentre CSS descrive l'aspetto. Questa separazione mantiene i documenti più leggeri, rende facile modificare l'aspetto di un sito in un unico punto e migliora l'accessibilità e la manutenibilità.
Conseguenze pratiche dell'utilizzo di <font> oggi:
- Lo standard non prevede un rendering predefinito per
<font>. I browser potrebbero ancora mostrare i suoi effetti legacy per compatibilità con il passato, ma questo comportamento non è garantito e può cambiare o essere ignorato. - Ripetere
<font>su ogni elemento gonfia il markup. Una singola regola CSS può applicare stili a centinaia di elementi contemporaneamente. - Non può essere controllato in modo responsive, tematizzato o sovrascritto in modo pulito come possono fare le classi CSS.
Se trovi <font> in un codebase esistente, consideralo qualcosa da migrare, non da estendere.
Sintassi legacy
Il tag <font> veniva usato in coppia — il contenuto andava tra il tag di apertura <font> e il tag di chiusura </font>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
<font size="2" color="#1c87c9">Blue text</font>
</p>
<p>
<font size="3" color="red">Red text, font size increased.</font>
</p>
<p>
<font face="arial" color="#8ebf42">Green text, typeface changed.</font>
</p>
</body>
</html>Risultato
L'attributo size e la sua scala da 1 a 7
A differenza di CSS, l'attributo size di <font> non accettava pixel o altre unità. Accettava un numero da 1 a 7, dove 1 è il più piccolo e 7 il più grande, con 3 come valore predefinito. I valori potevano essere anche relativi, ad esempio size="+2" o size="-1", modificandosi rispetto alla dimensione base.
Questa scala fissa corrispondeva approssimativamente ai seguenti valori CSS font-size:
<font size> | CSS font-size approssimativo |
|---|---|
| 1 | x-small (~10px) |
| 2 | small (~13px) |
| 3 | medium (~16px, predefinito) |
| 4 | large (~18px) |
| 5 | x-large (~24px) |
| 6 | xx-large (~32px) |
| 7 | ~48px |
Queste sono equivalenze approssimative — le dimensioni esatte in pixel dipendono dal browser e dalla dimensione base del font impostata dall'utente. Con CSS non sei più limitato a sette livelli; puoi impostare qualsiasi dimensione in px, em, rem, % o una parola chiave.
Corrispondenza tra attributi e proprietà CSS
Ogni attributo di <font> ha una sostituzione CSS diretta e migliore:
Attributo <font> | Proprietà CSS | Esempio |
|---|---|---|
color | color | color: #1c87c9; |
face | font-family | font-family: Arial, sans-serif; |
size | font-size | font-size: 18px; |
Il metodo moderno con CSS
L'approccio canonico è mantenere il codice HTML pulito e inserire gli stili in un blocco <style> (o in un foglio di stile esterno) utilizzando i selettori di classe. In questo modo una sola regola può applicare stili a tutti gli elementi corrispondenti, e modificare il design in seguito significa aggiornare il CSS in un unico punto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue-text {
color: #1c87c9;
font-size: 16px;
}
.red-text {
color: red;
font-size: 18px;
}
.green-text {
color: #8ebf42;
font-size: 18px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p class="blue-text">Blue text.</p>
<p class="red-text">Red text, font size increased.</p>
<p class="green-text">Green text, typeface changed.</p>
</body>
</html>Migrazione del codice <font> legacy
Per convertire il vecchio markup <font> in HTML e CSS moderni:
- Rimuovi il wrapper
<font>e mantieni il suo contenuto interno all'interno di un elemento semantico come<p>,<span>o un'intestazione. - Converti ogni attributo nella sua proprietà CSS corrispondente usando la tabella sopra (
color→color,face→font-family,size→font-size). - Converti il numero
sizein una dimensione CSS reale usando la tabella 1–7 — ad esempio,size="5"diventafont-size: 24px;(ox-large). - Raggruppa gli stili ripetuti in una classe in un blocco
<style>o in un foglio di stile esterno in modo da poterla riutilizzare, invece di applicare stili a ogni elemento singolarmente.
Ad esempio, <font size="5" color="red" face="arial">Sale!</font> diventa:
<style>
.sale {
font-size: 24px;
color: red;
font-family: Arial, sans-serif;
}
</style>
<span class="sale">Sale!</span>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| color | rgb (x, x, x) #xxxxxx colorname | Imposta il colore del testo. Usa invece CSS color. |
| face | font_family | Imposta il carattere tipografico. Usa invece CSS font-family. |
| size | number (1–7) | Imposta la dimensione del testo. Usa invece CSS font-size. |
Risorse correlate
- Tag HTML deprecati — l'elenco completo degli elementi obsoleti da evitare.
- Tag HTML
<basefont>— un altro elemento font obsoleto e la sua sostituzione CSS. - CSS
font-family, CSSfont-sizee CSScolor— il modo moderno per applicare stili al testo.