A < font > tag e seus atributos - Como alterar a fonte, tamanho e cor de textos em um site HTML

Neste tutorial de nosso Curso de HTML, vamos aprender a usar a tag <font>, que serve para definir várias características das fontes que vamos usar para criar nossos sites.

Apostila de HTML online e gratuita com certificado para iniciantes
Aprenda a fazer diversos efeitos nos textos de seu site
Essas características são parâmetros que nos permitem controlar o tipo de fonte, cor, tamanho e uma série de outras características que vão nos auxiliar na hora de apresentar um conteúdo em texto para os leitores de nossos websites.

Obtenha AQUI o Certificado do Curso de HTML! Trabalhe como Webmaster!

Formatação de texto em HTML e CSS

Desde que o HTML foi criado até os dias de hoje, muita coisa mudou, se automatizou, surgiram novas tecnologias e facilidades.
Um exemplo disso é o CSS, onde a maioria desses conhecimentos sobre fontes, cores e tamanhos são realmente empregados nos sites.

Devemos lembrar você, antes de iniciar este tutorial de HTML, que o uso da tag <font> e de seus parâmetros já saíram de uso e nem são mais suportados no HTML 5, e a formatação de fonte, cor e tamanho é feita através do CSS.

Porém, iremos ensinar à fazer essas formações em HTML, pois é um conhecimento importante, que vamos usar em breve, na seção de CSS de nosso curso, pois quando você for um Webmaster profissional e for criar um novo projeto, você usará o CSS para esses detalhes de estilo.

E diferente da maioria dos cursos e apostilas por aí, nós do HTML Progressivo insistimos que é totalmente necessário, e básico, você estudar isso em HTML, para entender como as coisas realmente funcionam, suas origens e propósitos.

Por incrível que pareça, estudar HTML bem estudado é realmente um diferencial nos dias de hoje onde as pessoas só buscam tutoriais rápidos e sem explicação, e acabam fazendo as coisas sem ter um mínimo de entendimento do que vão fazer.

A tag <font> - Manipulando as fontes

Todos que já usaram algum tipo de editor de textos, como Microsoft Word, já devem ter alterado ao menos uma vez a fonte do texto.

As fontes mais comuns são a Times New Roman, Arial, Courier, Helvetica, Verdana, dentre de centenas outras. Sendo inclusive possível criar sua própria fonte, ou mesmo baixar outras fontes.

Outra coisa comum que fazemos é alterar as cores de uma fonte.
Para fazer isso em HTML, vamos usar a mesma lógica, regra e tabela de cores que foi usada e explicada em nosso artigo sobre Como alterar a cor de fundo de um site.
Por isso, é importante você ter lido este tutorial de nosso curso para entender como mudar a cor de uma fonte, leia:
http://www.htmlprogressivo.net/2013/08/bgcolor-Como-mudar-a-cor-de-fundo-de-um-site-A-tabela-de-cores.html

Por fim, vamos aprender como alterar o tamanho de uma fonte.
Isso tudo será feito através da tag:
<font> </font>



O atributo face da tag <font> - Alterando o tipo de fonte de um texto em HTML

Para alterar o tipo de fonte de um texto em HTML, usamos o atribute face, da tag <font>.
A sintaxe desta tag e do atributo é:
<font face="NOME DA FONTE"> Aqui é seu texto que está com a fonte "NOME DA FONTE" </font>

Por exemplo, vamos escrever em 7 tipos diferentes de fontes.
Nosso código HTML seria:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> Como alterar a fonte de um texto em HTML </title>
		<meta name="description" content="Aprenda a alterar a fonte de um texto em HTML através da tag font e do atributo face">
	</head>
 
	<body> 
		<font face="Arial"> Arial </font> <br />
		<font face="Courier"> Courier </font> <br />
		<font face="Georgia"> Georgia </font> <br />
		<font face="Helvetica"> Helvetica </font> <br />
		<font face="Times"> Times </font> <br />
		<font face="Tribuchet"> Trebuchet </font> <br />
		<font face="Verdana"> Verdana </font> <br />
	</body>
 
</html>
Podemos citar diversos tipos de fontes, mas as mais comuns são:
  • Antiqua
  • Arial
  • Blackletter
  • Calibri
  • Comic Sans
  • Courier
  • Decorative
  • Fraktur
  • Frosty
  • Garamond
  • Georgia
  • Helvetica
  • Impact
  • Minion
  • Modern
  • Palatino
  • Roman
  • sans-serif
  • serif
  • Script
  • Swiss
  • Times
  • Times New Roman
  • Verdana


Vale lembrar que as fontes não são universais. Ou seja, as fontes que um brasileiro usa pode ser diferente das de um indiano ou chinês. Você pode, inclusive, apagar fontes de seu computador, ou adicionar novas.
Por isso, nem sempre que você colocar uma fonte todos os leitores de seu site irão ver essa mesma fonte.

O atributo face da tag <font> porém, possui uma opção muito interessante, de escolher várias fontes.
Podemos citar quantas quisermos no atributo face, separando-as por vírgula.
O navegador irá tentar interpretar a primeira, caso não consiga ele vai tentar exibir a segunda fonte, depois a terceira e assim sucessivamente, até conseguir exibir a fonte.

Por exemplo, vamos criar 3 nomes de fonte: "pita", "pota" e ... "teste".
Obviamente, elas não existem. Vamos escrever a quarta fonte a "sans-serif", que existe.
Nosso código HTML fica, testem e vejam o resultado:
<font face="pita, pota, teste, sans-serif"> Sans-serif </font>

O atributo color da tag <font> - Como mudar a cor de um texto em HTML

Assim como explicamos no tutorial de HTML sobre Como mudar o fundo de um site e a Tabela de Cores, vamos usar a mesma lógica para as cores de textos.

Para mudar a cor de um determinado texto, devemos colocar tal trecho entre as tags <font> e </font>, porém, devemos adicionar o atributo color, que vai definir a cor que você queira, baseado na Tabela de Cores.

Há 3 sintaxes para definir a cor do texto:
<font color="#XXXXXX"> Cor definida por 6 dígitos hexadecimais </font>
<font color="rgb(x,x,x)"> Cor definida por 3 números do RGB </font>
<font color="NOME DA COR"> Cor definida pelo nome </font>
Porém, assim no caso do atributo bgcolor da tag <head>, que muda a cor do fundo do site, o RGB só funciona em CSS.
Mas ensinamos de antemão para você ir logo aprendendo.

Veja o seguinte código HTML e tente descobrir, só vendo o código, o efeito que será visto no site:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> Como alterar a cor de um texto em HTML </title>
		<meta name="description" content="Aprenda a alterar a cor de um texto em HTML através da tag font e do atributo color">
	</head>
 
	<body> 
		<font color="#FF0000"> Este texto e vermelho </font> <br />
		<font color="Yellow"> Esse e amarelo </font>
	</body>
 
</html>

O atributo size da tag <font> - Como alterar o tamanho de uma fonte em HTML

Finalizando este tutorial de nosso curso de HTML sobre manipulação e formatação das fontes de um texto, vamos ensinar como mudar o tamanho de uma fonte.

Isso é feito através do atributo size (tamanho, em inglês) da tag <font>.
A sintaxe de uso desse atributo é a seguinte:
<font size="numero"> O tamanho da fonte deste texto eh "numero" </font>

Onde este "numero" pode variar de 1 até 7, onde o número 1 é o menor tamanho de fonte, e o número 7 é o maior tamanho possível de fonte.

O seguinte código HTML mostra todos os tamanhos das fontes, de 1 até 7.
Escreva esse código em seu editor de websites, salve com a extensão .html e rode o arquivo em seu navegador para ver o efeito:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> Como alterar o tamanho de um texto em HTML </title>
		<meta name="description" content="Aprenda a mudar o tamanho de um texto em HTML através da tag font e do atributo size">
	</head>
 
	<body> 
	   <font size="1"> Tamanho desta fonte:  1</font> <br />
	   <font size="2"> Tamanho desta fonte:  2</font> <br />
	   <font size="3"> Tamanho desta fonte:  3</font> <br />
	   <font size="4"> Tamanho desta fonte:  4</font> <br />
	   <font size="5"> Tamanho desta fonte:  5</font> <br />
	   <font size="6"> Tamanho desta fonte:  6</font> <br />
	   <font size="7"> Tamanho desta fonte:  7</font> <br />
	</body>
 
</html>
Cujo efeito será o seguinte:
Tamanho desta fonte: 1
Tamanho desta fonte: 2
Tamanho desta fonte: 3
Tamanho desta fonte: 4
Tamanho desta fonte: 5
Tamanho desta fonte: 6

Exercício de HTML

Reproduza os efeitos em texto em um site de HTML que foram exibidos na figura inicial deste tutorial, incluindo tamanhos, cores e tipos de fonte.
Use tags aninhadas para conseguir mais de um efeito no mesmo texto.

9 comentários:

Anônimo disse...

Atualiza essa parte do curso pois ela não é mais usada(ou esta dasatualizada)

Anônimo disse...

essa parte sobre o < font> não é mais usada assim agora é no CSS

Apostila HTML Progressivo disse...

Olá Anônimo,

Como explicamos na apresentação do curso, esta parte inicial ensina os conceitos do antigo HTML 4.01, sem se preocupar com as "deprecated tags", apenas por questão de didática.

Ao longo do curso, principalmente nas seções de CSS e HTML5, vamos explicando o que caiu em desuso e o que é recomendado.

Embora muitas coisas não sejam mais usadas, achamos importante estudar tudo, ter uma boa base mesmo no antigo HTML.

Mas agradecemos seus comentários.

Creative HTML5 Games disse...

Mas se eu quiser no site uma fonte que é diferente das outras que as pessoas tem?
Eu posso importa-las para meu site?

Creative HTML5 Games disse...

Muito Util seu tutorial, mas tem como importar uma fonte diferente para o site? e como faço isso?

Anônimo disse...

Creative HTML5 Games,

Não sei se você ainda esta a procura desta informação, mas dá uma olhada neste vídeo que tem como
fazer a importação de fontes para personalizar o seu site.

https://youtu.be/tcrxYeE-67A?list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o

leonardo calixta disse...

Fica aqui minha opinião...Para mim, mesmo sendo um curso em HTML"desatualizado" está sendo muito importante, pois, fui tentar fazer uma página em HTML5, bati de frente com novos conceitos de semântica e estilização
com CSS3. Como estou entrando agora nesse mundo da informação, preciso aprender do começo para não ficar boiando na hora de criar um site.

antonio carlos mello disse...

SE ESTA EM DESUSO NÃO SEI SÓ SEI QUE DEU CERTO EM MEU BLOG DA PLATAFORMA BLOGGER AGRADEÇO DESDE JÁ O QUE ESTOU APRENDENDO ATRAVÉS DE VOCÊS...

Anônimo disse...

entendo que não seja boa prática mas funciona :D
para leigos como eu que só queria diminuir o tipo de letra duma frase, foi óptimo!!