Cor, tamanho e tipo de letra

Continuamos o aprendizado sobre as etiquetas que nos servem para formatar o texto.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 05/5/04
Valorize este artigo:
Apesar de que por razões de homogeneidade e simplicidade de código estes tipos de formatos são controlados atualmente por folhas de estilo cascata (das quais já teremos tempo de falar), existe uma forma clássica e direta de definir cor, tamanho e tipo de letra de um determinado texto.

Isto se faz a partir da etiqueta <font> e seu fechamento correspondente. Dentro desta etiqueta devemos especificar os atributos correspondentes a cada um destes parâmetros que desejamos definir. A seguir comentamos os atributos principais desta etiqueta:

Atributo face

Define o tipo de letra. Este atributo é interpretado por versões do Netscape a partir da 3 e de MSIE 3 ou superiores. Outros navegadores as ignoram completamente e mostram o texto com a fonte que utilizam.

Deve-se ter cuidado com este atributo já que cada usuário, dependendo da plataforma que utilize, pode não dispor dos mesmos tipos de letra que nós com o que, se nós escolhemos um tipo do que não dispõe, o navegador se verá forçado a mostrar o texto com a fonte que utiliza por padrão (que costuma ser Times New Roman). Para evitar isso, dentro do atributo costuma-se selecionar vários tipos de letras separados por vírgulas. Neste caso, o navegador comprovará que dispõe do primeiro tipo numerado e se não for assim, passará para o segundo e assim sucessivamente até encontrar um tipo que possua ou então, até acabar a lista e colocar a fonte padrão. Vejamos um exemplo:

<font face="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font>

Que se visualizaria assim em uma página web:

Este texto tem outra tipografia

Nota: Aqui temos um exemplo de atributo cujo valor deve estar limitado entre aspas (").
Havíamos dito que as aspas eram opcionais nos atributos, entretanto isto não é assim sempre. Se o valor do atributo contém espaços, como é o caso de:

face="Comic Sans MS,arial,verdana"

devemos colocar as aspas para limitá-lo. Em caso de não ter aspas

face=Comic Sans MS,arial, verdana

se entenderia que face=Comic, mas não se levaria em conta tudo o que segue, porque o HTML não o associaria ao valor atributo. Neste caso o HTML pensaria que as seguintes palavras (depois do espaço) são outros atributos, mas como não os conhece como atributos simplesmente iria ignorá-los.


Atributo size

Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo.

Se falarmos em términos absolutos, existem 7 níveis de tamanhos distintos numerados de 1 a 7 por ordem crescente. Escolheremos portanto um valor size="1" para a menor letra ou size="7" para a maior.

<font size=4>Este texto é maior</font>

Que se visualizaria assim em uma página web:

Este texto é maior

Podemos também modificar o tamanho de nossa letra em relação ao do texto mostrado anteriormente definindo o número de níveis que queremos subir ou descer nesta escala de tamanhos por meio do signo + ou - . Desse modo, se definimos nosso atributo como size="+1" o que queremos dizer é que aumentamos um nível o tamanho da letra. Se estávamos escrevendo previamente em 3, passaremos automaticamente a 4.

Os tamanhos reais que vermos na tela dependerão da definição e do tamanho da fonte escolhido pelo usuário no navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menu superior, Exibir/Tamanho da fonte. No Netscape escolheremos View/Text Size. Esta flexibilidade pode acabar sendo embaraçosa para nós em mais de uma ocasião, já que em muitos casos desejaremos que o tamanho do texto permaneça constante para que este caiba em um determinado espaço. Veremos em seu momento que esta pré-fixação do tamanho pode ser realizada pelas folhas de estilo em cascata.

Atributo cor

A cor do texto pode ser definida através do atributo cor. Cada cor é por sua vez definida por um número hexadecimal que está composto por três partes. Cada uma destas partes representa a contribuição do vermelho, verde e azul à cor em questão.

Por outro lado é possível definir de uma maneira imediata algumas das cores mais freqüentemente usadas para as que se criaram um nome mais memotécnico:

Nombre Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow


<font color="red">Este texto está em vermelho</font>

Que se visualizaria assim em uma página web:

Este texto está em vermelho

Com tudo isso, já somos capazes de criar um texto formatado de uma forma realmente elaborada.

Colocamos então em prática tudo o que aprendemos nestes capítulos fazendo um exercício consistente em uma página que tenha as seguintes características:

  • Um título com cabeçalho de nível 1, em itálico e na cor verde oliva.
  • Um segundo título com cabeçalho de nível 2, também na cor verde oliva.
  • Todo texto da página deverá apresentar-se com uma fonte diferente da fonte padrão. Por exemplo, "Comic Sans MS" e no caso de que esta não esteja no sistema, que se coloque a fonte "Arial".
Pode-se ver uma possível solução do exercício neste link.





Comentários do artigo
Foram enviados 9 comentários ao artigo
9 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato