Skip to main content
Validação HTML

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

Sobre este problema de CSS

As propriedades font-style e font-weight servem propósitos diferentes. font-style controla se o texto aparece num estilo normal, itálico ou oblíquo, enquanto font-weight controla quão espessos ou finos os caracteres são renderizados. Escrever font-style: bold é um erro porque bold não está entre os valores aceites para font-style. Os navegadores irão ignorar completamente a declaração inválida, o que significa que o seu texto não ficará negrito — simplesmente renderizará no peso padrão.

Este erro geralmente vem da confusão entre as duas propriedades ou de esquecer qual propriedade lida com o negrito. Os valores válidos para cada propriedade são:

  • font-style: normal, italic, oblique, ou oblique com um ângulo (por exemplo, oblique 10deg)
  • font-weight: normal, bold, bolder, lighter, ou valores numéricos de 100 a 900

Para corrigir este problema, substitua font-style: bold por font-weight: bold. Se pretendeu tornar o texto negrito e itálico, precisará usar ambas as propriedades separadamente.

Exemplos

Incorreto — usar bold com font-style

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

<p style="font-style: bold;">Este texto não ficará negrito.</p>

Correto — usar font-weight para negrito

Mova o valor bold para a propriedade font-weight:

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

Correto — combinar negrito e itálico

Se quiser texto que seja negrito e itálico, use ambas as propriedades:

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

Correto — usar font-weight numa folha de estilos

Também pode aplicar estilos de negrito através de um bloco <style> ou folha de estilos externa, usando valores de palavra-chave ou numéricos:

<style>
  .emphasis {
    font-weight: bold;
  }
  .light {
    font-weight: 300;
  }
  .heavy {
    font-weight: 900;
  }
</style>

<p class="emphasis">Este texto está negrito (peso 700).</p>
<p class="light">Este texto é leve (peso 300).</p>
<p class="heavy">Este texto é extra pesado (peso 900).</p>

Note que a palavra-chave bold é equivalente ao valor numérico 700, e normal é equivalente a 400. Os valores numéricos dão-lhe controlo mais fino sobre o peso do texto, especialmente quando usar fontes variáveis ou famílias de fontes que oferecem múltiplas variações de peso.

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.