A propriedade CSS Font-size
Tamanho de uma fonte é alterado usando font-size. Pode ser especificado em valores absolutos ou relativos. Para especificar um valor absoluto, pode-se usar: font-size: número(pt | px | cm | mm | pc | in)
font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está contido.
font-size: tamanho_relativo (smaller, larger)
font-size: comprimento (em ou ex)
font-size: porcentagem%
Exemplos:
h1 {
font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está contido.
font-size: tamanho_relativo (smaller, larger)
font-size: comprimento (em ou ex)
font-size: porcentagem%
Exemplos:
h1 {
font-size: 24pt;
}
h1 {
font-size: x-large;
}
h1 {
font-size: smaller;
}
h1 {
font-size: 1.5em;
}
h1 {
font-size: 150%;
}
<h1 style="font-size: 1cm">
Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos podem ser alterados pelos usuários nos browsers atuais. As unidades válidas são: pt (pontos), px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).
Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tamanhos de 1 a 7 do descritor <font size> e podem variar de acordo com a família de fontes usada (variam bastante entre plataformas também). Veja um exemplo comparativo e o resultado no Internet Explorer para Windows:
<html>
<head>
<style>
p {font-family: serif}
.t1 {font-size: xx-small}
.t2 {font-size: x-small}
.t3 {font-size: small}
.t4 {font-size: medium}
.t5 {font-size: large}
.t6 {font-size: x-large}
.t7 {font-size: xx-large}
</style>
</head>
<body>
<p><span>xx-small</span> |
<span>x-small</span> |
<span>small</span> |
<span>medium</span> |
<span>large</span> |
<span>x-large</span> |
<span>xx-large</span> <br>
<font size="1">size=1</font> |
<font size="2">size=2</font> |
<font size="3">size=3</font> |
<font size="4">size=4</font> |
<font size="5">size=5</font> |
<font size="6">size=6</font> |
<font size="7">size=7</font> |</p>
</body>
</html>
Ficara assim:
h1 {
font-size: x-large;
}
h1 {
font-size: smaller;
}
h1 {
font-size: 1.5em;
}
h1 {
font-size: 150%;
}
<h1 style="font-size: 1cm">
Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos podem ser alterados pelos usuários nos browsers atuais. As unidades válidas são: pt (pontos), px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).
Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tamanhos de 1 a 7 do descritor <font size> e podem variar de acordo com a família de fontes usada (variam bastante entre plataformas também). Veja um exemplo comparativo e o resultado no Internet Explorer para Windows:
<html>
<head>
<style>
p {font-family: serif}
.t1 {font-size: xx-small}
.t2 {font-size: x-small}
.t3 {font-size: small}
.t4 {font-size: medium}
.t5 {font-size: large}
.t6 {font-size: x-large}
.t7 {font-size: xx-large}
</style>
</head>
<body>
<p><span>xx-small</span> |
<span>x-small</span> |
<span>small</span> |
<span>medium</span> |
<span>large</span> |
<span>x-large</span> |
<span>xx-large</span> <br>
<font size="1">size=1</font> |
<font size="2">size=2</font> |
<font size="3">size=3</font> |
<font size="4">size=4</font> |
<font size="5">size=5</font> |
<font size="6">size=6</font> |
<font size="7">size=7</font> |</p>
</body>
</html>
Ficara assim:
Os tamanhos relativos funcionam como o <big> e <smll>, aumentando a fonte atual por 150%. A diferença é que podem passar além do limite xx-large (ou <font size=7>) ou xx-small (font size=1>).
Os comprimentos referem-se a unidades comuns em tipografia. Um "em" é uma distân-cia horizontal equivalente ao tamanho de uma fonte (se uma fonte tem 20 pontos de tamanho, um em corresponde a uma distância de 20 pixels de largura). Um "ex" é a altura das letras de caixa-baixa (sem incluir as hastes ascendentes e descendentes). Tanto "em" como "ex" usam valores relativos ao elemento que contém o elemento atual. São úteis principalmente em espa-çamento, sendo pouco usados em fontes.
As porcentagens são afetadas pela herança, por exemplo:
<html>
<head>
<style>
.sec {font-size: 18pt;}
.sec h1 {font-size: 200%:}
.sec p {font-size: 50%;}
</style>
</head>
<body>
<div>Este é o texto desta seção.
<h1>2 vezes maior</h1>
<p>Este é um parágrafo da seção. O texto tem 50% do tamanho do texto
da seção.</p>
</div>
</body>
</html>
Ficara assim:
As porcentagens de 50% e 200% são aplicadas na fonte atual, que é a fonte do bloco que contém os dois elementos (<div>), e que tem tamanho 18pt. O resultado é que o <h1> será exibido em tamanho 26pt e <p> em tamanho 9pt.
| < Anterior | Próximo > |
|---|
