A pequena propriedade conhecida de fonte-tamanho-ajuste CSS3

Já quis usar fontes alternativas em seu CSS com diferentes proporções sem que eles pareciam enormes (ou pequenas)? O novo e brilhante CSS3 font-size-adjust propriedade poderia fazer exatamente isso, talvez.

O que font-size-adjust faz?

Primeiro, deixe-me avisá-lo: você precisará usar Firefox para ver os exemplos nesta página corretamente. Sim, não Safari, Firefox!

O font-size-adjust propriedade permite que você especifique uma relação de aspecto ideal para quando uma fonte de recurso é usada; se a fonte substitutiva tiver uma relação de aspecto diferente da preferida, o texto x-height (aproximadamente o tamanho de suas letras minúsculas) serão preservadas.

Dê uma olhada na imagem abaixo:

Baskerville e a Geórgia não têm a mesma relação de aspecto, então, quando o recurso de fonte ocorre (se Baskerville é a fonte ideal), o texto geralmente parece muito maior mesmo no mesmo tamanho.

Usando font-size-adjust, o original font-size para as fontes de retorno será dividido pelo valor font-size-adjust.

Não confunda font-size-adjust com -webkit-text-size-adjust, que é usado para especificar o ajuste de tamanho do texto no iPhone.

Como determinar o correto font-size-adjust valor

O exemplo da especificação W3C é muito claro:

Os autores podem calcular o valor de aspecto de uma determinada fonte, comparando os intervalos com o mesmo conteúdo, mas as propriedades diferentes do tamanho da fonte-ajuste. Se o mesmo tamanho de fonte for usado, os intervalos corresponderão quando o tamanho do tamanho da fonte for correto para a fonte fornecida.

Vou basicamente repetir o exemplo aqui.

Vejamos o seguinte código, no qual temos um parágrafo com dois spans.

O CSS:

1
2
3
4
5
p { font-family:Times New Roman; font-size:400px; }
             
span { border:solid 1px red; }
             
.adjust { font-size-adjust:0.5; }

The HTML:

1
<p><span>a</span><span class="adjust">a</span></p>

Ambos spans herdar o font-family de seu pai (o p elemento), mas o segundo span tem o font-size-adjust propriedade aplicada, com um valor aleatório.

Se você verificar a página de exemplo, Observe o exemplo à esquerda: as caixas vermelhas não correspondem ao tamanho em altura - o font-size-adjust o valor está errado.

[Todas as caixas da página de exemplo têm a mesma altura? O que foi que eu disse? Raposa de fogo…]

Após alguns experimentos, cheguei no valor de "0.455". Agora, aqui está o CSS para o segundo exemplo (à direita):

O CSS:

1
2
3
4
5
p { font-family:Times New Roman; font-size:400px; }
             
span { border:solid 1px green; }
             
.adjust { font-size-adjust:0.455; }

Se você seguir em frente para o página de exemplo, você verá que no exemplo com as bordas verdes, as duas caixas de controle têm a mesma altura - agora temos o corrigir font-size-adjust valor para a nossa fonte preferida.

Um exemplo

Aqui esta um exemplo rápido Eu criei apenas para mostrar isso trabalhando no texto real.

A pilha de fontes consiste em: Calibri, Lucida Sans e Verdana (e esta é a ordem pela qual as fontes são exibidas na página).

A renderização do Safari da página:

E Firefox’s:

Como você pode ver, o Firefox mantém a mesma altura-x independente da fonte que está sendo usada.

Não estou preocupado com o texto não alinhado, o objetivo deste exemplo é mostrar como font-size-adjust pode afetar a consistência do tamanho da fonte e da legibilidade da fonte.

Além disso, mesmo que o primeiro div tem a pilha de fontes correta, tive que especificar manualmente Lucida Sans e Verdana para o outro divs, então você (e eu) podemos ver a diferença, mesmo que tenhamos as três fontes instaladas.

Últimos comentários

Eu acho que o uso desta propriedade pode eventualmente ter algumas implicações negativas sobre como a tipografia é tratada em todo um site, mas esse pode ser o tópico para outra postagem - o principal objetivo aqui é apenas para mostrar uma propriedade CSS3 bastante obscura que pode ser útil em alguns casos.

Eu confesso que não o testei em um projeto "real" ainda assim, então eu ficaria feliz em ouvir seus pensamentos.

Isto é, por enquanto, apenas suportado pelo Firefox para Windows a partir da versão 1.0 e de 3.0 em todas as plataformas. Existe um erro arquivado no Webkit para resolver esse problema.

Referências e leituras adicionais