A font-optical-sizingpropriedade CSS permite que o navegador ajuste o contorno dos glifos de fonte para torná-los mais legíveis em tamanhos diferentes. Por exemplo, um texto menor pode obter um contorno mais espesso para aumentar seu contraste. Por outro lado, um texto maior pode ter algo mais “delicado” para citar a especificação.
.element ( font-optical-sizing: none; )Glifos têm contornos?
Eles fazem! Na verdade, todos os glifos os têm e são redimensionados de acordo com o tamanho da fonte. O problema é que um contorno superfino em um tamanho de fonte minúsculo pode não fornecer contraste suficiente para a melhor legibilidade; da mesma forma, contornos mais grossos em tamanhos maiores podem ter muito peso e contraste. font-optical-sizingtenta corrigir isso permitindo que o navegador mexa no contorno para que leia melhor em diferentes escalas. O resultado será um texto mais nítido e comprimentos de texto mais estreitos ou mais largos, dependendo do tamanho da fonte.
Isso só funciona em fontes que suportam dimensionamento óptico
E as fontes que suportam dimensionamento óptico são fontes variáveis , incluindo Roboto Delta, uma versão variável do clássico Roboto do Google. Outra fonte de suporte é Amstelvar. Ambas as fontes são mantidas pela Type Network.
Mesmo se uma fonte for variável, ela deve suportar explicitamente o dimensionamento ótico como um recurso.
Outra maneira de dimensionar fontes opticamente
A font-optical-sizingpropriedade é a maneira mais eficiente de dimensionar opticamente uma fonte que a suporta. Outra forma é usar a font-variation-settingspropriedade, que permite controlar o dimensionamento ótico com opsz, que é a palavra-chave para dimensionamento ótico em fontes variáveis que o suportam.
Observe que o uso font-variation-settingsexige que você defina o opszde acordo com o tamanho da fonte para que tudo seja dimensionado corretamente.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintaxe
font-optical-sizing: auto | none;- Inicial:
auto - Aplica-se a: todos os elementos
- Herdado: sim
- Valor calculado: palavra-chave especificada
- Tipo de animação: discreto
Valores
auto: Este é o valor padrão. Ele permite que os navegadores otimizem o texto em diferentes tamanhos de fonte para legibilidade.none: Isso evita que os navegadores modifiquem o texto.
A propriedade também aceita valores globais de palavras-chave, incluindo inherit, initiale unset.
Demo
Suporte de navegador
| IE | Beira | Raposa de fogo | cromada | Safári | Ópera |
|---|---|---|---|---|---|
| Não | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Navegador Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Todo |
Leitura adicional
- Módulo de fontes CSS nível 4 (rascunho do editor)
- Documentação MDN
- Fontes variáveis: tamanho óptico, eixos personalizados e outras curiosidades (tipografia Web responsiva)