Balise HTML <font>
La balise <font> obsolète définissait la taille, la police et la couleur du texte. Découvrez comment la remplacer avec CSS color, font-family et font-size.
La balise <font> était utilisée pour contrôler la taille, la couleur et la police du texte via ses attributs size, color et face. Cette page explique pourquoi vous ne devriez jamais l'utiliser dans du nouveau code, comment lire du balisage <font> hérité, et comment remplacer précisément chaque attribut par du CSS moderne.
La balise <font> est obsolète. Elle a été supprimée du standard HTML5 et constitue une balise HTML dépréciée. Ne l'utilisez pas. Stylisez le texte avec CSS à la place.
Pourquoi <font> est obsolète
<font> a été dépréciée parce qu'elle mélange la présentation (l'apparence du texte) avec le contenu (le texte lui-même). Le développement web moderne sépare ces préoccupations : HTML décrit la structure et le sens, tandis que CSS décrit l'apparence. Cette séparation rend les documents plus légers, facilite la modification de l'apparence d'un site en un seul endroit, et améliore l'accessibilité et la maintenabilité.
Conséquences pratiques de l'utilisation de <font> aujourd'hui :
- Le standard ne prévoit aucun rendu par défaut pour
<font>. Les navigateurs peuvent encore afficher ses effets hérités pour des raisons de compatibilité ascendante, mais ce comportement n'est pas garanti et peut changer ou être ignoré. - Répéter
<font>sur chaque élément alourdit votre balisage. Une seule règle CSS peut styliser des centaines d'éléments à la fois. - Elle ne peut pas être contrôlée de manière responsive, thématisée ou remplacée proprement comme le permettent les classes CSS.
Si vous trouvez <font> dans une base de code existante, traitez-la comme quelque chose à migrer, pas à étendre.
Syntaxe héritée
La balise <font> s'utilisait par paires — le contenu se plaçait entre la balise ouvrante <font> et la balise fermante </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>Résultat
L'attribut size et son échelle de 1 à 7
Contrairement à CSS, l'attribut size de <font> ne prenait pas de pixels ni d'autres unités. Il acceptait un nombre de 1 à 7, où 1 est le plus petit et 7 le plus grand, 3 étant la valeur par défaut. Les valeurs pouvaient également être relatives, par exemple size="+2" ou size="-1", s'ajustant par rapport à la taille de base.
Cette échelle fixe correspondait approximativement aux valeurs CSS font-size suivantes :
<font size> | CSS font-size approximatif |
|---|---|
| 1 | x-small (~10px) |
| 2 | small (~13px) |
| 3 | medium (~16px, par défaut) |
| 4 | large (~18px) |
| 5 | x-large (~24px) |
| 6 | xx-large (~32px) |
| 7 | ~48px |
Ce sont des équivalents approximatifs — les tailles exactes en pixels dépendent du navigateur et de la taille de police de base de l'utilisateur. Avec CSS, vous n'êtes plus limité à sept niveaux ; vous pouvez définir n'importe quelle taille en px, em, rem, % ou avec un mot-clé.
Correspondance attribut vers CSS
Chaque attribut de <font> possède un équivalent CSS direct et supérieur :
Attribut de <font> | Propriété CSS | Exemple |
|---|---|---|
color | color | color: #1c87c9; |
face | font-family | font-family: Arial, sans-serif; |
size | font-size | font-size: 18px; |
La méthode moderne avec CSS
L'approche recommandée consiste à garder votre HTML propre et à placer le style dans un bloc <style> (ou une feuille de style externe) en utilisant des sélecteurs de classe. Ainsi, une seule règle peut styliser tous les éléments correspondants, et modifier le design ultérieurement signifie éditer le CSS en un seul endroit.
<!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>Migration du code <font> hérité
Pour convertir un ancien balisage <font> en HTML et CSS modernes :
- Supprimez l'enveloppe
<font>et conservez son contenu interne dans un élément sémantique tel que<p>,<span>ou un titre. - Traduisez chaque attribut vers sa propriété CSS correspondante en utilisant le tableau de correspondance ci-dessus (
color→color,face→font-family,size→font-size). - Convertissez le numéro
sizeen une taille CSS réelle avec le tableau 1–7 — par exemple,size="5"devientfont-size: 24px;(oux-large). - Regroupez les styles répétés dans une classe dans un bloc
<style>ou une feuille de style externe afin de pouvoir les réutiliser, plutôt que de styliser chaque élément individuellement.
Par exemple, <font size="5" color="red" face="arial">Sale!</font> devient :
<style>
.sale {
font-size: 24px;
color: red;
font-family: Arial, sans-serif;
}
</style>
<span class="sale">Sale!</span>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| color | rgb (x, x, x) #xxxxxx colorname | Définit la couleur du texte. Utilisez CSS color à la place. |
| face | font_family | Définit la police. Utilisez CSS font-family à la place. |
| size | number (1–7) | Définit la taille du texte. Utilisez CSS font-size à la place. |
Ressources associées
- Balises HTML dépréciées — la liste complète des éléments obsolètes à éviter.
- Balise HTML
<basefont>— un autre élément de police obsolète et son remplacement CSS. - CSS
font-family, CSSfont-sizeet CSScolor— la méthode moderne pour styliser le texte.