Formatando fontes

A possibilidade de se escolher e de se modificar os principais atributos na formatação das fontes, é um importante recurso que quando utilizado com criatividade e bom censo, torna-se um grande aliado na composição visual de uma página em HTML.

Existe uma tag na linguagem HTML exclusiva para a formatação das fontes. Utilizando esta tag, podemos definir através dos atributos disponíveis, detalhes como o tipo, o tamanho e a cor da fonte.

Sintaxe da tag <font>:

<font face="nome_do_tipo_da_fonte" size="tamanho" color="cor">

Texto que receberá a formatação </font>

Onde: Todos os valores definidos nos atributos, serão aplicados no texto delimitado pela abertura e pelo fechamento da tag font.    

O atributo face:

Este atributo define o nome do tipo da fonte no qual a informação será apresentada.

É importante saber que a fonte definida no atributo (face), deve estar devidamente instalada no computador da pessoa que está requisitando esta página, por isso, recomenda-se a utilização apenas das fontes mais tradicionais e que já vêem instaladas com o sistema operacional ou por aplicativos que são comumente utilizados como processadores de textos.

Como exemplos de fontes mais usadas podemos citar: Arial, Verdana, Helvetica, Sans-Serif, Times New Roman etc.

Podemos declarar separados por vírgula, mais de uma fonte no atributo (face), pois deste modo, caso a primeira fonte não esteja instalada no computador do visitante, será utilizada a segunda e caso a situação se repita com a segunda fonte, a terceira será utilizada e assim sucessivamente.

O ideal é disponibilizarmos por precaução no máximo quatro fontes e caso não haja nenhuma das fontes instaladas, será utilizada a fonte padrão para as páginas em HTML, definida nas configurações do navegador que originalmente é a fonte Times New Roman.

A sintaxe para declarar mais de uma fonte é a seguinte:

<font face="Arial, Verdana, Helvetica, Sans-Serif"> TEXTO </font>

O atributo size: Este atributo é utilizado para definir o tamanho da fonte, podendo ser feita de duas formas:

• Valor absoluto: Informamos ao atributo um valor referente ao tamanho da fonte, podendo ser utilizados números de "1" à "7", onde quanto maior for o número inserido, maior será o tamanho aplicado de acordo com a escala de tamanho das fontes.

• Valor relativo: Com base no tamanho padrão da fonte que é igual a "3", somamos ou subtraímos um valor pelo qual definirá o tamanho atual da fonte.

Exemplos da utilização do atributo (size):

<font face="arial" size="1"> valor (1) equivalente ao tamanho (9) </font>
<font face="arial" size="2"> valor (2) equivalente ao tamanho (10) </font>
<font face="arial" size="3"> valor (3) equivalente ao tamanho (12) </font>
<font face="arial" size="4"> valor (4) equivalente ao tamanho (14) </font>
<font face="arial" size="5"> valor (5) equivalente ao tamanho (18) </font>
<font face="arial" size="6"> valor (6) equivalente ao tamanho (24) </font>
<font face="arial" size="7"> valor (7) equivalente ao tamanho (36) </font>

Os tamanhos das fontes indicados ao lado, são equivalentes às definições das fontes utilizadas pelo editor de textos Microsoft Word. Serão válidas somente, caso as configurações originais do navegador referente às fontes, não tenham sido modificadas.

O atributo color:

O atributo (color) é utilizado para definir a cor da fonte que será aplicada no texto delimitado pela abertura e fechamento da tag font.

Para a definição das cores das fontes, é utilizado o padrão RGB que segue as regras contidas no módulo I, no texto "A aplicação de cores em páginas Web".

Exemplo da utilização do atributo (color):

<font face="verdana" size="4" color="red"> texto em vermelho </font>
<font face="comic sans ms" size="+1" color="#ff0000"> texto em vermelho </font>
<font face="arial" size="3" color="black"> texto com a cor preta </font>
<font face="times new roman" size="3" color="#000000"> texto com a cor preta </font>