Por que eu devo ler este artigo:Apesar de alguns sites serem mais dependentes de elementos de texto do que outros para se comunicarem com o usuário, tais elementos estão em todo lugar. Nesse artigo veremos quais propriedades podem ser usadas para que um texto tenha a sua aparência customizada em uma página.

O CSS dispõe de diversas propriedades para alterar a aparência de elementos de texto. Com elas podemos customizar a cor, tamanho e fonte, bem como diversas outras características desses elementos.

A maior parte dessas propriedades estão agrupadas em font e, portanto, começaremos por elas.

Negrito

A propriedade font-weight é utilizada para aplicar ou remover negrito de um elemento de texto.

O valor de font-weight pode ser numérico ou uma palavra. Ambos correspondem a quão espessa será a fonte.

Os valores numéricos são 100, 200, 300, 400, 500, 600, 700, 800 e 900. Dentre eles, 400 corresponde a aparência padrão da maioria das fontes e 700 ao negrito.

No Código 1 vemos o exemplo de uma regra que utiliza font-weight.


  p {
      font-weight: 400;
  }
Código 1. Regra utilizando font-weight

Quando aplicados a elementos esses valores podem produzir o efeito observado na Figura 1.

Aplicação dos valores de 100 a 900 em elementos
p
Figura 1. Aplicação dos valores de 100 a 900 em elementos p

Como podemos observar, os valores de 100 a 500 não produzem efeitos diferentes na fonte padrão do navegador. Podemos dizer o mesmo dos valores de 600 a 900. Portanto, algumas fontes podem não demonstrar alteração em sua aparência por não possuírem uma versão correspondente ao valor utilizado.

A fonte Roboto, distribuída pela Google, suporta todos essas variações de peso e alguns outros estilos. Demonstramos isso na Figura 2 ...

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo