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:

html<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:

html<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

cssseletor {
  font-size-adjust: número | none;
}

Valores

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:

html<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:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>

cssp {
  font-size: 16px;
  font-family: Georgia, "Times New Roman";
  font-size-adjust: 0.5;
}

Результат: