Propriedade CSS font-stretch

A propriedade CSS font-stretch seleciona uma face mais estreita ou mais larga da fonte atual, permitindo condensar ou expandir o texto sem alterar seu font-size ou font-weight. É uma das propriedades CSS3.

O ponto fundamental a compreender é que font-stretch não estica os glifos como uma transformação faria. Ela apenas seleciona uma face de largura alternativa que a fonte já inclui. Se a font-family não tiver faces de variação de largura, a propriedade não terá efeito visível e o texto permanecerá em sua largura normal. É por isso que você só verá um resultado com fontes que incluam variantes condensadas/expandidas (por exemplo, Myriad Pro, Roboto Condensed, ou uma fonte variável com eixo wdth).

Quando usar

Use font-stretch quando:

Você estiver usando uma família de fontes que fornece múltiplas faces de largura e quiser que o navegador selecione a correta (em vez de importar cada face com um nome font-family separado).
Você estiver trabalhando com uma fonte variável que expõe um eixo de largura (wdth) — os valores percentuais mapeiam diretamente nesse eixo.

Para texto comum em que a fonte tem apenas uma largura, font-stretch não faz nada, portanto não dependa dela como fallback para ajustar texto em uma caixa.

Nota: Na especificação CSS Fonts mais recente, font-stretch foi renomeada para font-width. Os navegadores ainda aceitam font-stretch como alias, portanto o nome da propriedade neste capítulo permanece válido em todos os lugares.

Valores

font-stretch aceita uma palavra-chave ou uma porcentagem. Cada palavra-chave tem uma porcentagem equivalente:

Palavra-chave	Porcentagem
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

As porcentagens oferecem controle mais fino: qualquer valor de 50% a 200% é permitido, e em uma fonte variável você pode usar valores intermediários como 90% ou 133%. Valores abaixo de 100% são mais estreitos que o normal; valores acima de 100% são mais largos.

Valor inicial	normal
Aplicável a	Todos os elementos. Aplica-se também a ::first-letter e ::first-line.
Herdado	Não
Animável	Sim.
Versão	CSS3
Sintaxe DOM	object.style.fontStretch = "expanded";

Sintaxe

Sintaxe da Propriedade CSS font-stretch

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;

Exemplo da propriedade font-stretch

O exemplo abaixo aplica cada palavra-chave à mesma letra. Lembre-se de que você só verá diferença se a fonte renderizada (Myriad Pro aqui, com fallback do sistema) realmente fornecer essas faces de largura.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 4em;
        font-family: 'Myriad Pro', sans-serif;
      }
    </style>
  </head>
  <body>
    <p>
      <span style="font-stretch: ultra-condensed">A</span>
      <span style="font-stretch: extra-condensed">A</span>
      <span style="font-stretch: condensed">A</span>
      <span style="font-stretch: semi-condensed">A</span>
      <span style="font-stretch: normal">A</span>
      <span style="font-stretch: semi-expanded">A</span>
      <span style="font-stretch: expanded">A</span>
      <span style="font-stretch: extra-expanded">A</span>
      <span style="font-stretch: ultra-expanded">A</span>
    </p>
  </body>
</html>

Experimente Você Mesmo »

Usando uma porcentagem com uma fonte variável

Com uma fonte variável que expõe um eixo de largura, você pode solicitar qualquer valor no intervalo de 50% a 200%, incluindo larguras intermediárias:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: 'Roboto Flex', sans-serif;
        font-size: 2em;
      }
      .narrow { font-stretch: 75%; }
      .normal { font-stretch: 100%; }
      .wide   { font-stretch: 150%; }
    </style>
  </head>
  <body>
    <p class="narrow">Condensed text (75%)</p>
    <p class="normal">Normal text (100%)</p>
    <p class="wide">Expanded text (150%)</p>
  </body>
</html>

Como a face é selecionada

A face escolhida para um determinado valor de font-stretch depende das faces de largura que a fonte realmente inclui. Quando nenhuma face corresponde exatamente ao valor solicitado, o navegador utiliza a mais próxima: valores abaixo de 100% mapeiam para a face mais estreita mais próxima, e valores em ou acima de 100% mapeiam para a face mais larga mais próxima.

Descrição dos valores

Valor	Descrição
ultra-condensed	Estreita o texto ao máximo (50%).
extra-condensed	Estreita o texto significativamente, mas não tanto quanto `ultra-condensed` (62.5%).
condensed	Estreita o texto moderadamente, mas não tanto quanto `extra-condensed` (75%).
semi-condensed	Estreita o texto levemente, mas não tanto quanto `condensed` (87.5%).
normal	Nenhuma face alternativa é selecionada. Este é o valor padrão (100%).
semi-expanded	Expande o texto ligeiramente além de `normal` (112.5%).
expanded	Expande o texto moderadamente além de `semi-expanded` (125%).
extra-expanded	Expande o texto significativamente além de `expanded` (150%).
ultra-expanded	Expande o texto ao máximo (200%).
50% a 200%	Uma porcentagem que representa o fator de esticamento; abaixo de 100% é mais estreito, acima é mais largo.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

font-weight — seleciona a espessura da face da fonte.
font-style — seleciona faces normal, itálico ou oblíquo.
font-variant — controla versalete e outros glifos alternativos.
font-family — declara qual fonte (e suas faces) usar.
font — o shorthand para definir várias propriedades de fonte de uma vez.

Prática

O que a propriedade CSS 'font-stretch' faz?

Permite modificar a proporção das fontes sem alterar sua altura.Altera a cor da fonte.Altera a altura da fonte.Permite modificar a largura das fontes.