Etiqueta HTML <font>
La etiqueta obsoleta <font> definía tamaño, tipografía y color del texto. Aprende por qué se eliminó en HTML5 y cómo reemplazarla con CSS.
La etiqueta <font> se usaba para controlar el tamaño, el color y la tipografía del texto mediante sus atributos size, color y face. Esta página explica por qué no debes utilizarla en código nuevo, cómo leer el marcado <font> heredado y cómo reemplazar exactamente cada atributo con CSS moderno.
La etiqueta <font> está obsoleta. Fue eliminada del estándar HTML5 y es una etiqueta HTML obsoleta. No la uses. En su lugar, dale estilo al texto con CSS.
Por qué <font> está obsoleta
<font> fue declarada obsoleta porque mezcla la presentación (cómo se ve el texto) con el contenido (el texto en sí). El desarrollo web moderno separa estas responsabilidades: HTML describe la estructura y el significado, mientras que CSS describe la apariencia. Esta separación mantiene los documentos más pequeños, facilita modificar el aspecto de un sitio desde un único lugar y mejora la accesibilidad y el mantenimiento.
Consecuencias prácticas de usar <font> hoy:
- El estándar no define una representación visual predeterminada para
<font>. Los navegadores pueden seguir mostrando sus efectos heredados por compatibilidad con versiones anteriores, pero este comportamiento no está garantizado y puede cambiar o ser ignorado. - Repetir
<font>en cada elemento infla el marcado. Una sola regla CSS puede dar estilo a cientos de elementos a la vez. - No puede controlarse de forma responsiva, aplicarle temas o sobrescribirse limpiamente como lo hacen las clases CSS.
Si encuentras <font> en una base de código existente, trátalo como algo que hay que migrar, no que extender.
Sintaxis heredada
La etiqueta <font> venía en pares: el contenido iba entre la etiqueta de apertura <font> y la de cierre </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>Resultado
El atributo size y su escala del 1 al 7
A diferencia de CSS, el atributo size de <font> no aceptaba píxeles ni otras unidades. Aceptaba un número del 1 al 7, donde 1 es el más pequeño y 7 el más grande, siendo 3 el valor predeterminado. Los valores también podían ser relativos, por ejemplo size="+2" o size="-1", ajustándose en relación con el tamaño base.
Esta escala fija se correspondía aproximadamente con los siguientes valores CSS de font-size:
<font size> | CSS font-size aproximado |
|---|---|
| 1 | x-small (~10px) |
| 2 | small (~13px) |
| 3 | medium (~16px, predeterminado) |
| 4 | large (~18px) |
| 5 | x-large (~24px) |
| 6 | xx-large (~32px) |
| 7 | ~48px |
Estas son equivalencias aproximadas; el tamaño en píxeles exacto depende del navegador y del tamaño de fuente base del usuario. Con CSS ya no estás limitado a siete niveles; puedes establecer cualquier tamaño en px, em, rem, % o una palabra clave.
Correspondencia entre atributos y CSS
Cada atributo de <font> tiene un reemplazo CSS directo y más completo:
Atributo de <font> | Propiedad CSS | Ejemplo |
|---|---|---|
color | color | color: #1c87c9; |
face | font-family | font-family: Arial, sans-serif; |
size | font-size | font-size: 18px; |
La forma moderna con CSS
El enfoque canónico es mantener el HTML limpio y colocar los estilos en un bloque <style> (o en una hoja de estilos externa) usando selectores de clase. De este modo, una sola regla puede dar estilo a todos los elementos coincidentes, y cambiar el diseño más adelante significa editar CSS en un único lugar.
<!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>Migrar código <font> heredado
Para convertir marcado <font> antiguo a HTML y CSS moderno:
- Elimina el envoltorio
<font>y conserva su contenido interno dentro de un elemento semántico como<p>,<span>o un encabezado. - Traduce cada atributo a su propiedad CSS usando la tabla de correspondencias anterior (
color→color,face→font-family,size→font-size). - Convierte el número de
sizea un tamaño CSS real con la tabla del 1 al 7; por ejemplo,size="5"se convierte enfont-size: 24px;(ox-large). - Agrupa los estilos repetidos en una clase dentro de un bloque
<style>o una hoja de estilos externa para poder reutilizarlos, en lugar de dar estilo a cada elemento individualmente.
Por ejemplo, <font size="5" color="red" face="arial">Sale!</font> se convierte en:
<style>
.sale {
font-size: 24px;
color: red;
font-family: Arial, sans-serif;
}
</style>
<span class="sale">Sale!</span>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| color | rgb (x, x, x) #xxxxxx colorname | Establece el color del texto. En su lugar, usa CSS color. |
| face | font_family | Establece la tipografía. En su lugar, usa CSS font-family. |
| size | number (1–7) | Establece el tamaño del texto. En su lugar, usa CSS font-size. |
Recursos relacionados
- Etiquetas HTML obsoletas: la lista completa de elementos obsoletos que se deben evitar.
- Etiqueta HTML
<basefont>: otro elemento de fuente obsoleto y su reemplazo en CSS. - CSS
font-family, CSSfont-sizey CSScolor: la forma moderna de dar estilo al texto.