Propriedade CSS font-size-adjust

A propriedade font-size-adjust preserva a legibilidade do texto quando a font-family principal não está disponível e uma fonte alternativa é substituída. Ela faz isso forçando o texto renderizado a manter uma x-height alvo independentemente de qual fonte da pilha é realmente utilizada.

Por que a x-height importa

A x-height é a altura das letras minúsculas (como a letra "x"), medida a partir da linha de base. A em-height é o tamanho total da fonte. A razão entre elas é chamada de valor de aspecto da fonte:

aspect value = x-height / em-height

Duas fontes definidas com o mesmo font-size ainda podem parecer visivelmente diferentes em tamanho, porque seus valores de aspecto diferem. Por exemplo, Verdana (valor de aspecto ~ 0,58) parece maior e mais legível do que Georgia (~ 0,52) no mesmo tamanho de ponto. Portanto, quando uma fonte alternativa substitui a fonte principal, o texto substituído pode parecer grande ou pequeno demais mesmo que font-size nunca tenha mudado.

font-size-adjust resolve isso. Quando você fornece um número, o navegador escala a fonte em uso para que sua x-height seja igual a esse número multiplicado pelo font-size atual. O tamanho visual das letras minúsculas permanece constante independentemente de qual fonte vence a cadeia de alternativas.

Um fluxo de trabalho prático: pegue o valor de aspecto da sua fonte preferida (primeira escolha) e passe-o como valor de font-size-adjust. As fontes alternativas são então ajustadas para corresponder à aparência da sua fonte preferida.

Valor Inicial	none
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Sim.
Animável	Sim.
Versão	CSS2.1
Sintaxe DOM	object.style.fontSizeAdjust = "0.5";

Nota: O suporte dos navegadores para font-size-adjust é fraco. O Firefox ofereceu suporte até a versão 118, depois o removeu na versão 119 (2023), e nunca foi implementado no Chrome, Safari ou Edge. Na prática, não é mais possível confiar nessa propriedade. A abordagem moderna mais robusta é hospedar as próprias fontes (para que o fallback raramente seja acionado) e ajustar a face alternativa com os descritores size-adjust, ascent-override e descent-override dentro de uma regra @font-face.

Sintaxe

Sintaxe da Propriedade CSS font-size-adjust

font-size-adjust: number | none | initial | inherit;

Exemplo da propriedade font-size-adjust

No exemplo abaixo, ambos os parágrafos solicitam uma fonte que provavelmente não está instalada ("Made Up Font") e recorrem à sans-serif. O segundo parágrafo adiciona font-size-adjust, de modo que seu texto alternativo é normalizado para uma x-height fixa. Em um navegador que ainda implementa a propriedade, o parágrafo ajustado é lido de forma mais consistente:

<!DOCTYPE html>
<html>
  <head>
    <title>font-size-adjust example</title>
    <style>
      p {
        font-family: "Made Up Font", sans-serif;
        font-size: 20px;
      }
      .adjusted {
        font-size-adjust: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>font-size-adjust</h1>
    <p>Without font-size-adjust: the fallback font keeps its own x-height.</p>
    <p class="adjusted">
      With font-size-adjust: 0.5 the fallback x-height is normalized.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
none	Nenhum ajuste de tamanho de fonte. Este é o valor padrão da propriedade.
number	Um número positivo representando a razão de aspecto (x-height dividida pela em-height).
initial	Faz com que a propriedade use seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Compatibilidade com Navegadores

Navegador	Suporte
Chrome	Sem suporte
Firefox	1.5–118 (removido na v119)
Safari	Sem suporte
Edge	Sem suporte
Opera	Sem suporte

Prática

Qual é a principal função da propriedade 'font-size-adjust' no CSS?

Controla o negrito de uma fonte.Preserva a x-height de uma fonte e garante que ela não seja distorcida quando alterada.Ajusta a cor da fonte.Garante que a legibilidade das letras minúsculas seja preservada quando a fonte é alterada.Redimensiona a fonte para caber na largura do viewport.

Veja também

Propriedade CSS font-size — define o tamanho real do texto.
Propriedade CSS font-family — define a pilha de fontes e suas alternativas.
Regra CSS @font-face — carrega fontes personalizadas e ajusta alternativas com size-adjust.
Abreviação CSS font — define várias propriedades de fonte de uma vez.