📝 Texto e Fontes (font, text)

CSS oferece um controle robusto sobre a aparência de fontes e a formatação de textos.

1. Propriedades de Fonte (`font`)

font-family: Define a família da fonte (ex: 'Times New Roman', Arial). É uma boa prática fornecer uma lista de fontes alternativas (font stack).
font-size: Controla o tamanho do texto (ex: 16px, 1.2rem).
font-weight: Define o "peso" ou espessura da fonte (ex: normal, bold, 700).
font-style: Define o estilo da fonte (ex: normal, italic).

.destaque {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
}

Este parágrafo usa a fonte Georgia, em negrito e itálico.

2. Propriedades de Texto (`text`)

color: Define a cor do texto.
text-align: Alinha o texto horizontalmente (left, right, center, justify).
text-decoration: Adiciona decoração ao texto (none, underline, line-through).
text-transform: Altera a capitalização do texto (none, uppercase, lowercase, capitalize).

.alerta {
    color: red;
    text-align: center;
    text-transform: uppercase;
}

Texto de alerta centralizado e em maiúsculas.

3. Espaçamento de Texto

line-height: Define a altura da linha, controlando o espaçamento vertical entre as linhas de texto.
letter-spacing: Controla o espaçamento entre os caracteres.
word-spacing: Controla o espaçamento entre as palavras.

.legivel {
    line-height: 1.8;
    letter-spacing: 1px;
}

Este parágrafo tem um espaçamento maior entre as linhas e entre as letras para melhorar a legibilidade. Um bom `line-height` é crucial para textos longos.

4. Sombra de Texto (`text-shadow`)

Adiciona uma sombra ao texto. A propriedade aceita valores para deslocamento horizontal, vertical, desfoque e cor.

.titulo-sombreado {
    /* deslocamento-x | deslocamento-y | desfoque | cor */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Título com Sombra

5. Atalho (Shorthand) `font`

É possível combinar várias propriedades de fonte em uma única declaração. A ordem é importante: font-style font-weight font-size/line-height font-family.

.texto-padrao {
    font: normal 400 16px/1.5 Arial, sans-serif;
}

Este texto foi estilizado usando a propriedade de atalho `font`.