Propriedade font-size-adjust
A propriedade font-size-adjust permite
controlar o tamanho da fonte, mantendo inalterado
font-size
(aumentar ou diminuir).
Aplicaçăo: suponha que em font-family
estejam definidas duas fontes separadas por vírgula, por exemplo,
Georgia, "Times New Roman". Suponha
que o computador do usuário năo tenha a fonte Georgia
- neste caso, será aplicada "Times New Roman".
No entanto, enfrentaremos um problema - com o mesmo
valor de font-size
as fontes terăo aparęncia diferente. No exemplo
abaixo, ambos os parágrafos tęm font-size
definido como 16px, mas diferentes font-family.
Observe como os tamanhos diferem:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
Lorem ipsum dolor sit amet.
</p>
:
Isso ocorre porque o tamanho exibido
da fonte depende menos
da propriedade font-size,
que define apenas o tamanho geral da fonte,
e mais da relaçăo entre os valores da propriedade font-size
e a medida x-height (x-height
- é a diferença entre o tamanho da letra minúscula
"x" e da letra maiúscula "X" para uma determinada
fonte).
Esta relaçăo é chamada de aspecto da fonte e é calculada pela fórmula: aspecto = font-size / x-height.
A propriedade font-size-adjust resolve o problema dos tamanhos
(ela permite alterar o aspecto da fonte),
fazendo com que a segunda fonte tenha a mesma
aparęncia de tamanho que a primeira.
Vamos fazer com que a fonte Times
New Roman tenha o mesmo tamanho que
a Georgia. Sabemos o aspecto da Georgia
- é 0.5 (veja a tabela abaixo).
Vamos definir font-size-adjust para o texto
com Times New Roman para o valor 0.5
e veremos que o segundo texto ficou do mesmo
tamanho que o primeiro:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet.
</p>
:
Sintaxe
seletor {
font-size-adjust: número | none;
}
Valores
| Valor | Descriçăo |
|---|---|
number |
Um número define o aspecto da fonte. |
none |
Năo há ajuste do tamanho da fonte. |
Valor padrăo: none.
Como determinar o valor do aspecto para uma fonte?
Veja um trecho da especificaçăo W3C:
O fator de proporcionalidade (aspecto) para
fontes selecionadas pode ser calculado comparando
o mesmo texto, mas com valores diferentes
de font-size-adjust. Se o valor
da propriedade for ajustado corretamente, no mesmo tamanho
de fonte o texto permanecerá inalterado para todas
as fontes usadas na página.
Apresento os valores de aspecto que conheço para
algumas fontes: Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Exemplo
Compare a aparęncia do texto com valores diferentes
de font-size-adjust e o mesmo font-size
e font-family:
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Exemplo . Aplicaçăo na vida real
O código abaixo faz com que, na ausęncia
da fonte Georgia no computador do usuário,
a fonte aplicada Times New Roman
tenha o mesmo tamanho que a Georgia:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
