artigos
>> tipologia >> tudo em família
(artigo originalmente publicado no
site Aranha Internet e design)
Fábio Carvalho
31/3/2001
À medida que a web foi se desenvolvendo,
a pressão para que houvesse formas de se
ter mais controle sobre a formatação
das fontes foi aumentando. No início, a
única fonte possível de se usar
era a Times New Roman no caso de Windows
e Times no caso do Mac. Depois foram sendo
acrescentados vários recursos para que
os designers pudessem ter mais controle sobre
a "cara" das fontes em suas páginas.
Um dos modelos que se pode adotar, desde que o
uso de folhas de estilo se tornou mais popular,
e que na verdade é um retorno às
convenções tipográficas desenvolvidas
ao longo dos séculos pelos tipógrafos
tradicionais é a definição
de FAMÍLIAS.
Este modelo não usa tags simplistas como
<b> ou <i>,
como era comum de se fazer antes do uso em larga
escala de folhas de estilo, mas ao invés
disto ele se baseia em uma definição
metódica de famílias de fontes,
tamanhos, pesos e variações.
como se faz
Você certamente não vai se surpreender
ao descobrir que, para mudar a famíla da
fonte empregada para exibir um texto, usa-se a
propriedade font-family. O valor
que atribuimos a esta propriedade é uma
lista separada por vírgulas com os nomes
das fontes que se acredita existir no computador
do vistante do site. O browser irá procurar
cada fonte da lista, na ordem apresentada, e exibirá
o texto com a primeira fonte que ele encontrar
no computador do usuário. Caso ele não
encontre nenhuma das fontes da lista, ele usará
a fonte padrão do sistema.
Por exemplo, suponha que você precise que
seu texto esteja em Georgia. O estilo abaixo
cria uma classe que você pode usar onde
quer que você necessite um texto em Georgia:
<HEAD>
.
.
<STYLE type=text/css>
.Georgia {font-family: Georgia;}
</STYLE>
.
.
</HEAD>
Para os menos acostumados com o uso de folhas
de estilo, lembramos que as definições
de classes acontecem normalmente no início
do código da página, entre as tags
<head> e </head>,
por uma questão de organização,
embora funcione em qualquer outro lugar da página.
Basta adicionar class="Georgia" à
tag <p>, ou qualquer outra
que delimite um bloco de texto (<td>,
<span>, etc) para obter o efeito
desejado:
<p class="Georgia">
Esta frase deve estar em Georgia.
</p>
Esta frase deve estar em Georgia.
Se o seu browser suporta a propriedade font-family
(Netscape e Internet Explorer 4+) e o seu computador
possui a fonte "Georgia" instalada, você
verá o resultado. Caso você não
tenha esta fonte em seu computador, então
você deve estar vendo a frase como tudo
mais nesta página.
segue >>
|
