Skip to main content
Validação HTML

CSS: “font-stretch”: “bold” não é um valor “font-stretch”.

Sobre este problema de CSS

A propriedade font-stretch seleciona uma face normal, condensada ou expandida de uma família de fontes. Os seus valores de palavra-chave válidos são ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded e ultra-expanded. Também aceita valores percentuais (por exemplo, 50% a 200%). O valor bold não se enquadra em nenhuma destas categorias porque descreve o peso da fonte (espessura dos traços), não a largura da fonte (quão estreitos ou largos são os caracteres).

Este erro normalmente acontece devido a um de dois enganos:

  1. Confundir font-stretch com font-weight: Pretendia tornar o texto negrito mas usou acidentalmente a propriedade errada.
  2. Erro de digitação ou copy-paste na propriedade abreviada font: Ao escrever declarações de fonte abreviadas, as várias sub-propriedades podem facilmente ficar trocadas.

O validador W3C assinala isto porque os navegadores irão ignorar valores CSS inválidos, o que significa que o seu estilo pretendido não será aplicado. Corrigir isto garante que os seus estilos funcionam conforme esperado em todos os navegadores e passam na validação.

Como corrigir

  • Se quer texto negrito, use font-weight: bold (ou valores numéricos como 700).
  • Se quer caracteres mais largos ou mais estreitos, use font-stretch com um valor válido como condensed ou expanded.
  • Se precisa de ambos, aplique cada propriedade separadamente ou use a propriedade abreviada font corretamente.

Exemplos

Incorreto: usar bold com font-stretch

Isto desencadeia o erro de validação porque bold não é um valor font-stretch válido:

<p style="font-stretch: bold;">Este texto não será renderizado como esperado.</p>

Corrigido: usar font-weight para negrita

Se a intenção era tornar o texto negrito, mude para font-weight:

<p style="font-weight: bold;">Este texto está negrito.</p>

Corrigido: usar font-stretch corretamente para largura

Se a intenção era ajustar a largura do carácter, use um valor font-stretch válido:

<p style="font-stretch: expanded;">Este texto usa uma face de fonte expandida.</p>

Usar ambas as propriedades em conjunto

Pode combinar font-weight e font-stretch quando precisa tanto de texto negrito como de uma largura de fonte diferente:

<style>
  .styled-text {
    font-weight: bold;
    font-stretch: condensed;
    font-family: Arial, sans-serif;
  }
</style>

<p class="styled-text">Este texto está negrito e condensado.</p>

Referência de valores font-stretch válidos

Aqui está uma visão geral rápida de todos os valores de palavra-chave válidos para font-stretch:

<style>
  .condensed { font-stretch: condensed; }
  .normal-width { font-stretch: normal; }
  .expanded { font-stretch: expanded; }
  .custom-width { font-stretch: 75%; }
</style>

<p class="condensed">Texto condensado</p>
<p class="normal-width">Texto de largura normal</p>
<p class="expanded">Texto expandido</p>
<p class="custom-width">Texto com 75% de largura</p>

Note que font-stretch só funciona se a família de fontes selecionada incluir faces condensadas ou expandidas. Se a fonte não tiver estas variações, a propriedade não terá efeito visível mesmo com valores válidos.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.