artigos
>> tipologia >> pesos e medidas
(artigo originalmente publicado no
site Aranha Internet e design)
Fábio Carvalho
14/4/2001
A propriedade font-size usa quatro
modos diferentes para especificar o tamanho de
um texto: "tamanho de roupa" (literalmente
- em inglês: clothing), relativo, porcentagem
e absoluto.
tamanhos
O mais estranho e engraçado é o
modelo "tamanho de roupa". Ele
varia de xx-small (extra-pequeno)
até xx-large (extra-grande),
em sete tamanhos de texto. Veja a tabela abaixo:
| tamanho |
como se faz |
exemplo |
xx-small |
<span style="FONT-SIZE:
xx-small">exemplo</span> |
exemplo |
x-small |
<span style="FONT-SIZE:
x-small">exemplo</span> |
exemplo |
small |
<span style="FONT-SIZE:
small">exemplo</span> |
exemplo |
medium |
<span style="FONT-SIZE:
medium">exemplo</span> |
exemplo |
large |
<span style="FONT-SIZE:
large">exemplo</span> |
exemplo |
x-large |
<span style="FONT-SIZE:
x-large">exemplo</span> |
exemplo |
xx-large |
<span style="FONT-SIZE:
xx-large">exemplo</span> |
exemplo |
Os mais "experts" já devem ter
notado: estes são os sete tamanhos que
podem ser especificados para um texto usando-se
a tag <font>, e correspondem
aos valores de 1 a 7 do parâmetro size
desta tag.
Se este método não lhe agrada, talvez
você prefira atribuir um tamanho para suas
fontes usando valores relativos. Neste
caso, você pode usar os valores larger
(maior) e smaller (menor) para ajustar
o tamanho do texto uma medida maior ou menor do
que o tamanho do bloco de texto onde esta atribuição
se encontra. Em geral, larger move
o tamanho do texto uma posição da
escala de 1 a 7, e smaller move uma
posição para baixo. Estes valores
correspondem ao uso dos valores +1
e-1 do parâmetro size
da tag <font>.
Por exemplo, o estilo:
.ggrande {font-size: larger;}
funciona tanto quando aplicado em um bloco com
texto em uma tamanho pequeno quanto grande. Veja
este exemplo:
<span class="ggrande">como será que fica este texto?</span>
se o tamanho base do bloco de texto é
pequeno ( "1", no exemplo abaixo), o
resultado será:
Aqui estamos usando o
menor tamanho para o texto em geral;
como será que fica este texto?
se o tamanho base do bloco de texto é
maior ("3", no exemplo abaixo), o estilo
criado (ggrande) também funcionará:
Aqui estamos usando um
tamanho maior para o texto em geral;
como será que fica este texto?
É bom lembrar: larger e smaller
só funcionam até se atingir os limites
inferior e superior da escala (xx-large
e xx-small, ou 1 e 7,
respectivamente).
segue >>
|
