Propriedade font-stretch
Última atualização: 2026-09-13
font-stretch Propriedade font-stretch
A propriedade font-stretch do CSS seleciona uma variante condensada ou expandida de uma fonte, de ultra-condensed a ultra-expanded em nove níveis. Só tem efeito se a fonte realmente fornecer uma variante de largura correspondente.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | Palavra-chave | Níveis de expansão da fonte |
<percentage> | Tipo | Uma porcentagem de expansão |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-stretch | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Aviso： Quase nenhuma fonte chinesa inclui variantes de largura, então a propriedade é efetivamente inerte para o chinês e é usada principalmente com tipografia ocidental e fontes variáveis.
❓ Perguntas Frequentes
QComo a propriedade font-stretch difere de letter-spacing no CSS?
AO font-stretch altera a proporção de largura dos próprios glifos (condensed/expanded) e precisa que a fonte forneça variantes de largura correspondentes ou eixos de fonte variável; o letter-spacing apenas adiciona espaço entre caracteres sem mudar os glifos. Use font-stretch para deixar o texto mais estreito e letter-spacing para dar mais respiro.
QA propriedade font-stretch tem algum efeito na renderização de texto chinês?
ABasicamente não. Quase todas as fontes chinesas trazem apenas um conjunto de glifos de largura regular, sem variantes condensadas ou expandidas, então o navegador ignora a propriedade. É útil principalmente para texto ocidental e fontes variáveis.
QComo faço o texto parecer mais estreito usando a propriedade font-stretch no CSS?
ASe a fonte fornecer variantes de largura, use font-stretch: condensed. Você também pode comprimir com transform: scaleX(0.9), embora os glifos fiquem distorcidos. Fontes variáveis aceitam porcentagens exatas de largura, por exemplo font-stretch: 75%.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
