Tag HTML <font>
A tag obsoleta <font> definia tamanho, tipografia e cor do texto. Saiba por que foi removida no HTML5 e como substituí-la com CSS color, font-family e font-size.
A tag <font> era utilizada para controlar o tamanho, a cor e a tipografia do texto por meio dos atributos size, color e face. Esta página explica por que você nunca deve usá-la em código novo, como ler marcação legada com <font> e exatamente como substituir cada atributo pelo CSS moderno.
A tag <font> é obsoleta. Ela foi removida do padrão HTML5 e é uma tag HTML depreciada. Não a utilize. Estilize o texto com CSS.
Por que <font> é Obsoleta
<font> foi depreciada porque mistura apresentação (como o texto aparece) com conteúdo (o próprio texto). O desenvolvimento web moderno separa essas preocupações: o HTML descreve estrutura e significado, enquanto o CSS descreve a aparência. Essa separação mantém os documentos menores, facilita a alteração do visual de um site em um único lugar e melhora a acessibilidade e a manutenibilidade.
Consequências práticas de usar <font> hoje:
- O padrão não fornece nenhuma renderização padrão para
<font>. Os navegadores ainda podem exibir seus efeitos legados por compatibilidade retroativa, mas esse comportamento não é garantido e pode mudar ou ser ignorado. - Repetir
<font>em cada elemento incha sua marcação. Uma única regra CSS pode estilizar centenas de elementos ao mesmo tempo. - Ela não pode ser controlada de forma responsiva, temática ou sobrescrita de maneira limpa como as classes CSS.
Se você encontrar <font> em uma base de código existente, trate-a como algo a ser migrado, não a ser estendido.
Sintaxe Legada
A tag <font> era usada em pares — o conteúdo ficava entre a tag de abertura <font> e a de fechamento </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
O Atributo size e sua Escala de 1 a 7
Ao contrário do CSS, o atributo size de <font> não aceitava pixels ou outras unidades. Ele aceitava um número de 1 a 7, onde 1 é o menor e 7 o maior, sendo 3 o padrão. Os valores também podiam ser relativos, por exemplo size="+2" ou size="-1", ajustando em relação ao tamanho base.
Essa escala fixa correspondia aproximadamente aos seguintes valores de font-size do CSS:
<font size> | font-size CSS aproximado |
|---|---|
| 1 | x-small (~10px) |
| 2 | small (~13px) |
| 3 | medium (~16px, padrão) |
| 4 | large (~18px) |
| 5 | x-large (~24px) |
| 6 | xx-large (~32px) |
| 7 | ~48px |
Estes são equivalentes aproximados — os tamanhos exatos em pixels dependem do navegador e do tamanho de fonte base do usuário. Com CSS você não está mais limitado a sete passos; você pode definir qualquer tamanho em px, em, rem, % ou uma palavra-chave.
Mapeamento de Atributos para CSS
Cada atributo de <font> tem uma substituição direta e melhor em CSS:
Atributo de <font> | Propriedade CSS | Exemplo |
|---|---|---|
color | color | color: #1c87c9; |
face | font-family | font-family: Arial, sans-serif; |
size | font-size | font-size: 18px; |
O Modo Moderno com CSS
A abordagem canônica é manter seu HTML limpo e colocar o estilo em um bloco <style> (ou em uma folha de estilos externa) usando seletores de classe. Dessa forma, uma regra pode estilizar todos os elementos correspondentes, e alterar o design mais tarde significa editar o CSS em um ú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>Migrando Código <font> Legado
Para converter marcação <font> antiga para HTML e CSS modernos:
- Remova o wrapper
<font>e mantenha seu conteúdo interno dentro de um elemento semântico como<p>,<span>ou um cabeçalho. - Traduza cada atributo para sua propriedade CSS usando a tabela de mapeamento acima (
color→color,face→font-family,size→font-size). - Converta o número de
sizepara um tamanho CSS real usando a tabela de 1 a 7 — por exemplo,size="5"torna-sefont-size: 24px;(oux-large). - Agrupe estilos repetidos em uma classe em um bloco
<style>ou numa folha de estilos externa para que possam ser reutilizados, em vez de estilizar cada elemento individualmente.
Por exemplo, <font size="5" color="red" face="arial">Sale!</font> torna-se:
<style>
.sale {
font-size: 24px;
color: red;
font-family: Arial, sans-serif;
}
</style>
<span class="sale">Sale!</span>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| color | rgb (x, x, x) #xxxxxx colorname | Define a cor do texto. Use CSS color em vez disso. |
| face | font_family | Define a tipografia. Use CSS font-family em vez disso. |
| size | number (1–7) | Define o tamanho do texto. Use CSS font-size em vez disso. |
Recursos Relacionados
- Tags HTML depreciadas — a lista completa de elementos obsoletos a evitar.
- Tag HTML
<basefont>— outro elemento de fonte obsoleto e sua substituição em CSS. - CSS
font-family, CSSfont-sizee CSScolor— a forma moderna de estilizar texto.