1. O documento discute formatação de fontes em HTML, incluindo tipos, cores, tamanhos e estilos. 2. São descritos atributos como <font>, <span> e suas propriedades para definir essas formatações. 3. Instruções passo-a-passo são fornecidas para aplicar essas formatações usando um editor HTML.

1. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 1/6
HTML
Fontes: Tipos, Cores, Tamanhos
Na linguagem HTML estão disponíveis formatos envolvendo fontes: tamanho, cores, estilo, alinhamento, fundos etc, possibilitando
inúmeras possibilidades de apresentação do texto.
Fontes
Para saber mais detalhes sobre as fontes, clique aqui.
Cores
Para entender como são disponibilizadas as cores nas telas e os seus respectivos códigos RGB e hexadecimal, clique aqui.
Para ver algumas tabelas de cores, em base 10 e em 16:
Tabela1 - Tabela2 - Tabela 3
Texto: fonte, tamanho, estilo e cor
Note-se que para aplicar uma formatação, após selecionar o texto desejado, pode-se utilizar os botões das barras de ferramentas
ou clicar em "Format" e em algumas das opções como "Text style", "Text color", "Paragraph". Ou seja, pode-se combinar
parãmetros.
O parâmetro COLOR contém a cor do texto.
O parâmetro SIZE contém o tamanho. Se for de uma fonte é um algarismo entre 1 (menor) e 7 (maior).
Quando se lida com fontes FACE contém o nome do tipo de letra
Por exemplo:
<font face=*> </font> ou <span style="font-family: *;"></span>:
O texto que estiver entre os tags <font...> e </font> ou entre <span...> e <span> terá a formatação de fonte determinada pelo "*",
que deverá ser substituído pelo nome da fonte escolhida.
É importante lembrar que essa fonte só poderá ser visualizada em outro computador se ele possuir essa fonte instalada.
Portanto, é interessante que se use as fontes padrões. São elas: Arial, Helvetica, Sans, Times, Verdana, Courrier e Georgia.
<font color="#000000"> </font> ou <span style="color: rgb(0, 0, 0);"> ** </span>
O texto que estiver entre os tags <font...> e </font> ou entre <span...> e <span> terá a cor especificada pelo "*".
Note-se que o código poderá ser substituído pelo nome de uma cor em inglês, ou ainda, pelo código em RGB em base 16. Nesse
caso (#000000) ou rgb(0, 0, 0) corresponde ao preto.
<font size=*> </font>:
O texto que estiver entre os tags <font...> e </font> ou entre <span...> e <span> terá o tamanho expressado pelo "*". O
asterisco poderá ser substituído pelos números de 1 a 7, onde 1 representa o menor tamanho de fonte e 7 o maior.
Deve ficar claro que os três atributos que complementam o elemento "font" podem ser usados dentro de um único tag.
Exemplo:
A palavra Exemplo (acima) está entre <center><font color="#FFFF66" face="verdana" size="3"></center>
O menu formatar
Clicando no menu "Format" tem-se acesso aos menus referentes à formatação:
Traduzindo:
.Sumário
a. Introdução
b. Editores
c. NVU-Aparência
d. Estrutura
e. Cores
f. Cores: Códigos
g. Fontes
h. Listas
i. Imagens
j. Imagens/Textos
k. Tabelas
l. Links
m. Java Script
n. Sons
o. Frames
p. Animação
q. Publicação
r. Estilo (CSS)
s. Extensões FF
t. Pecados...
Tabela de cores 1
Tabela de cores 2
Tabela de cores 3

2. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 2/6
Mas os comandos mais utilizados de formatação também estão nas barras de formatação:
a. Abrir o kompozer e digitar um texto, ou copiar um texto previamente digitado em qualquer programa editor de textos.
b. Selecionar o texto todo ou apenas a parte que deseja formatar
c. No menu "Format", clicar em "Font" e clicar sobre a fonte desejada.
As fontes existentes no Windows estarão disponíveis.
d. Novamente, no menu "Format", clicar em "Size" ("Tamanho") e clicar no tamanho desejado
Muito pequeno, Pequeno, Médio, Grande, Muito grande, Maior (x-small, small, medium, large, x-large, xx-large)
Também podem ser usados os comandos Smaller ( <Ctrl>- Diminuir ou <Ctrl>+ Aumentar) no menu ou na barra, presionando
os botões
e. Novamente, no menu "Format", clicar em "Estilo do texto"
Várias opções estão disponíveis, como Negrito, Itálico, Sublinhado, Tachado, Sobreescrito, Subescrito estão presentes.
Algumas dessas opções também estão presentes na forma de botões: Negrito, Itálico, Sublinhado:
f. Novamente, no menu "Format", clicar no quadrado superior de "Cor do texto" ou
na barra, pressionando o quadrado superior do botão
Abre-se a janela "Cor do texto"

3. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 3/6
Com o texto previamente selecionado, no lado superior esquerdo pode-se escolher o tom desejado clicando-se sobre a figura, no
lado direito basta clicar sobre a cor desejada para aplicá-la. Em baixo aparecerá ocódigo da cor no sistema RGB e no Hex.
Também pode ser colocado o código da cor no campo inferior à esquerda. Para entender esses números clicar em Tabela de
cores.
Para alterar a cor do fundo do texto pressionar o botão
Novamente a cor poderá ser escolhida na janela de cores.
Texto: alinhamento, recuo e marcadores
g. Novamente, no menu "Format", clicar em "Align" ("Alinhamento")
Quatro opções estão disponíveis: Left, Center, Right e Justify (à esquerda, centralizado, à direita e justificado)
h. Novamente, no menu "Format", clicar em "Increase Indent" ("Aumentar recuo")
O texto selecionado irá para a direita.
Se for clicado "Decrease Indent" ("Diminuir recuo") o texto voltará para a esquerda.
i. No menu "Format", clicar em "List" ("Lista")
Algumas opções também estão presentes na forma de botões:
Entre outras, poderá ser escolhida uma lista com números ou com "bullets"
Página: Plano de fundo e cores da página No menu "Format", clicar em "Page colors and Background..." ("Plano de fundo e
cores..." )
Na janela que se abre clicar no pequeno retângulo após "Background" ("Plano de fundo") e na janela de cores, escolher a cor
desejada.

4. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 4/6
Se desejar usar uma imagem como plano de fundo deve-se clicar em "Choose File" ("Selecionar arquivo") e localizar o arquivo
desejado. O caminho do local onde está o arquivo aparecerá em "Background Image" ("Imagem do plano de fundo").
Além do plano de fundo nesta janela também pode-se escolher todas as cores dos textos da página: do texto normal, do link, do
link ativo, do link visitado, e do plano de fundo (background). Se desejar ver mais detalhes sobre links clique aqui.
Ao se clicar em cada retângulo ao lado do que se queira especificar abre-se uma janela de cores, semelhante à vista
anteriormente.
Se desejar que uma imagem seja utilizada como plano de fundo, clicar em "Selecionar arquivo" e procurar a imagem desejada.
Ao encontrá-la, clicar em "Abrir" e o caminho aparecerá no campo sob "Imagem do plano de fundo".
Para se escolher somente a cor do plano de fundo também pode-se pressionar o quadrado inferior do botão
Visulizando a página no navegador
Assim que o arquivo for salvo, pode-se visualizá-lo em um navegador:
- Clicar bo btão "Browse" na barra de Composição ou
- Abrir o gerenciador de arquivos
- Localizar o arquivo desejado
- Dar um duplo clique no arquivo recém salvo ou
- Abrir o navegador (no LabInfo é o Firefox)
- Clicar em Arquivo / File - Abrir arquivo / Open file
- Localizar o arquivo desejado. Clicar em Abrir / Open
Outras opções
a. Posicionar o cursor em um local conveniente do texto e
clicar no menu "Insert" ("Inserir") - "Horizontal Line" ("Linha horizontal")
b. Posicionar o cursor em um local conveniente do texto e
clicar no menu "Insert" ("Inserir") - "Characters and Symbols" ("Caracteres e símbolos")
clicar no botão "Character"
selecionar o símbolo desejado
e clicar no botão "Insert" e inserir um símbolo especial.
Fechar, clicando em "X" ou em "Close"
Todos os navegadores exibem a fonte?
Primeiramente, é preciso decidir a qual fonte vai ser utilizada.
Pode-se, teoricamente, escolher qualquer fonte existente, mas, na verdade, a fonte só aparecerá em computadores que também
tiverem tal fonte.

5. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 5/6
Portanto, se for escolhida uma fonte pouco utilizada, há poucas chances de que os outros irão poder vê-la.
Fontes livres semelhantes a fontes proprietárias
Há várias fontes proprietárias. Ou seja, uma empresa possui todos os direitos sobre elas.
Por exemplo, a Microsoft possui todos os direitos sobre as fontes "Arial", "Courier" e "Times New Roman".
Inesperadamente, a ABNT recomenda o uso de fontes Arial ou Times New Roman para trabalhos acadêmicos, monografias,
dissertações e teses de doutorado. Então, o que fazer?
Em maio de 2007 a RedHat desenvolveu um conjunto de fontes chamado de "Liberation", com a intenção de substituir fontes
proprietárias em ambientes Linux, pois são extremamente metricamente compatíveis com as fontes proprietárias, não interferindo
diretamente em espaçamento horizontal e vertical ou na quantidade de linhas e páginas.
Há um pacote de fontes chamado Liberation que inclui:
Liberation Sans - em substituição à Arial
Liberation Serif - em substituição à Times New Roman
Liberation Mono - em substituição à Courier New
Liberation Sans Narrow - em substituição à Arial Narrow
Para efetuar o download do pacote de fontes Liberation, acessar
https://fedorahosted.org/liberation-fonts/
http://packages.debian.org/lenny/ttf-liberation/
Exercícios
2.1. Abrir o arquivo html / htm1-5a.html.
Criar uma página, onde deve ser colocado título, autor e descrição, incluindo esse texto, cuja cor é:
a. Clara, em fundo em cor escura. Salvar em html / htm2-1a.html
b. Escura, em fundo em cor clara, com outra fonte e estilo. Salvar em html / htm2-1b.html
c. Clara, em fundo com arquivo escuro, com outra fonte e estilo. Salvar em html / htm2-1c.html
d. Escura, em fundo com arquivo claro, com outra fonte e estilo. Salvar em html / htm2-1d.html.
Acessar a hp Tabela de cores1
e. mudar a cor clara de htm1a.htm para "Light Wood". Salvar em html / htm2-1e.html
f. mudar a cor escura de htm1b.htm para "Indian Red". Salvar em html / htm2-1f.html
2.2. Abrir o arquivo html / htm1.5b.html. Repetir o procedimento descrito no item 2.1.
Salvar os arquivos resultantes como html / htm2-2a.html, html / htm2-2b.html,..., html / htm2-2g.html.
2.3. Abrir o arquivo html / htm1-5c.html.Repetir o procedimento descrito no item 2.1.
Salvar os arquivos resultantes como html / htm2-3a.html, html / htm2-3b.html, .., html / htm2-3g.html.
Referências Bibliográficas
(topo)

6. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 6/6
Este "site", destinado prioritariamente aos alunos de Fátima Conti,
está disponível sob FDL (Free Documentation Licence),
pretende auxiliar quem esteja começando a se interessar por internet,
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.
Deseja enviar essa página?
Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).
Enviar página
Se você usa webmail copie o endereço abaixo
http://www.ufpa.br/dicas/htm/htm-font.htm
Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.
Última alteração: 21 abr 2012