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:
-
Confundir
font-stretchcomfont-weight: Pretendia tornar o texto negrito mas usou acidentalmente a propriedade errada. -
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 como700). -
Se quer caracteres mais largos ou mais estreitos, use
font-stretchcom um valor válido comocondensedouexpanded. -
Se precisa de ambos, aplique cada propriedade separadamente ou use a propriedade abreviada
fontcorretamente.
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.