A propriedade CSS font-size-adjust chega ao Chrome hoje,
e se torna parte do valor de referência recentemente disponível. Essa propriedade ajuda a evitar
mudança do layout quando as fontes substitutas são carregadas e garantir
a legibilidade de fontes substitutas em tamanhos menores. O font-size-adjust
faz parte de
Interoperabilidade de 2024,
Portanto, essa é outra vitória para o esforço de melhorar a interoperabilidade
plataforma da Web.
O problema
Quando você compara duas fontes definidas com o mesmo tamanho, dependendo da forma e do tamanho dos glifos, o texto exibido pode ocupar uma quantidade de espaço muito diferente. Como exemplo, a demonstração a seguir mostra textos em Verdana e Arial, com 16 pixels.
A diferença de tamanho é justificada pelo fato de que o valor do aspecto, a altura de letras minúsculas em comparação com letras maiúsculas em uma fonte; varia entre as fontes.
Isso pode causar dois problemas quando uma fonte com um valor de aspecto diferente é usada como substituto. Primeiro, a quantidade de espaço ocupado pela fonte mudará. Segundo, sua opção de fonte substituta pode ser menos legível do que a especificada pela primeira vez, especialmente em fontes de tamanho pequeno. Isso ocorre porque o altura relativa de letras minúsculas para maiúsculas é um fator chave em legibilidade.
Como o font-size-adjust ajuda
A propriedade font-size-adjust permite ajustar a fonte substituta para melhorar
corresponder à primeira fonte. O exemplo a seguir mostra as duas fontes mostradas
antes, desta vez a segunda fonte foi ajustada para corresponder à primeira.
font-size-adjust.Este exemplo usa um único valor, um número, que ajusta as fontes usando o valor-chave
métrica de fonte padrão de ex-height. Esta é a proporção entre a altura x, a
a altura de um x minúsculo na fonte conforme o tamanho. Também é possível especificar a fonte
métrica usada. No próximo exemplo, normalizei as fontes usando o
Palavra-chave ch-width, além do número.
font-size-adjust com a métrica de fonte ch-width.Para ver todos os valores possíveis, consulte o
Documentação do MDN para font-size-adjust.
Confira seu site usando a fonte substituta e veja se um pouco de
o ajuste com font-size-adjust pode ajudar os leitores que usam a fonte substituta
tenham uma experiência melhor, especialmente agora estão disponíveis em todos os lugares!