CSS: ESTILOS DE FORMATAÇÃO DE TEXTO

O CSS possui uma gama de propriedades de formatações para textos. Vamos abordar as propriedades aqui neste post.

font-family

Essa propriedade é fundamental para agruparmos fontes de preferencias que estão instaladas no seu computador. No seu valor inserimos os nomes das fontes separadas por vírgula. Ex.:

body{
  font-family: 'Arial', 'Tahoma', sans_serif;
}

Por que colocamos grupos de fontes?

Quando são fontes conhecidas e usuais na maioria dos dispositivos, é boa prática usarmos grupo de fonte. No exemplo acima a primeira fonte é Arial. Se no computador tiver instalado a fonte Arial, essa será usada, caso contrário, será pesquisada a próxima fonte, que é Tahoma. Se essa tbm não estiver instalada por algum motivo, será pesquisada alguma fonte sem -serifa, especificado acima: sans-serif.

font-weight

Essa propriedade é para especificar a espessura da fonte. podendo no seu valor ser numério de 100 a 900 em intervalos de 200, ou representar por textos: lighter, normal, bold, bolder.

p{
  font-weight: bold;
}

Nem todas as famílias de fontes possuem todos os intervalos de espessuras de 100 a 900. Ao escolher a fonte para o projeto podemos usar fontes usuais, que estão instaladas na maioria dos dispositivos, ou usar fontes externas, que dá mais segurança da fonte real ser impressa para todos os dispositivos. Posso citar aqui o site google fontes onde temos um arcevo de fontes gratuitas para uso.

font-style

O próprio nome já deduz que é estilo de fonte e seus valores são três: normal, italic e oblique. Abaixo temos os três exemplos:

.normal{
  font-style: normal;
}
.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}

font-size

Essa propriedade diz referência ao tamanho da fonte a ser usada, sendo tamanho fixo ou relativo.

body {
  font-size: 14px;
}
p {
  font-size: 1em;
}

A unidade px é tamanho fixo, como mostrado acima o 14px no body. Já o 1em é percentual (%) relativo ao tamanho do body. quando colocamos 1em estamos dizendo que o tamanho do p será de 100% ao tamanho do body.

Fonte: w3scholl, Google Fonte