EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Texto e Fontes CSS

O conteúdo principal das páginas web é texto. O CSS fornece propriedades ricas para controlar fonte do texto, tamanho, cor, espaçamento e alinhamento.

Propriedades de Fonte

Referência Rápida de Propriedades de Fonte

Propriedade Valores Comuns Finalidade
font-family "Microsoft YaHei", Arial, sans-serif Definir fonte (múltiplos fallbacks)
font-size 16px, 1.2em, 1rem, 100% Tamanho da fonte
font-weight normal(400), bold(700), 100~900 Peso da fonte
font-style normal, italic, oblique Estilo da fonte (itálico/normal)
line-height 1.5(sem unidade), 24px, 150% Altura da linha (recomendado 1.5-1.8)
font italic bold 16px/1.8 sans-serif Abreviação para múltiplas propriedades

Melhor Prática de Pilha de Fontes

✅ Ordem da pilha de fontes: font-family deve ir do mais específico para o mais genérico, ex: font-family: "PingFang SC", "Microsoft YaHei", sans-serif;. Os navegadores tentam carregar da esquerda para a direita até encontrar uma fonte disponível.

Exemplo

HTML 
<style>
p {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
</style>
<p>Este é um exemplo de parágrafo.</p>
▶ Experimente

Propriedades de Texto

Referência Rápida de Propriedades de Texto

Propriedade Valores Comuns Finalidade
color #333, red, rgb(0,0,0) Cor do texto
text-align left, center, right, justify Alinhamento horizontal
text-decoration none, underline, overline, line-through Decoração do texto
text-indent 2em, 20px Recuo da primeira linha
letter-spacing 2px, -1px Espaçamento entre caracteres
word-spacing 5px Espaçamento entre palavras
text-transform uppercase, lowercase, capitalize Transformação do texto
text-shadow 2px 2px 4px rgba(0,0,0,0.5) Sombra do texto
text-overflow clip, ellipsis Tratamento de overflow (precisa de overflow: hidden)

Alinhamento de Texto

Exemplo

HTML 
<style>
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
<div class="left">Alinhado à esquerda (padrão)</div>
<div class="center">Alinhado ao centro</div>
<div class="right">Alinhado à direita</div>
<div class="justify">Texto justificado, ajusta automaticamente o espaçamento entre palavras</div>
▶ Experimente

Decoração de Texto

Exemplo

HTML 
<style>
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.none { text-decoration: none; }
</style>
<div class="underline">Texto sublinhado</div>
<div class="overline">Texto sobrescrito</div>
<div class="line-through">Texto tachado</div>
<div class="none">Sem decoração (remove sublinhado padrão do link)</div>
▶ Experimente

Sombra de Texto

⚠️ Lembrete de legibilidade: Embora sombras de texto pareçam bonitas, uso excessivo reduz a legibilidade. Fundo escuro com sombra escura é ilegível — garanta contraste suficiente entre texto e fundo.

Exemplo

HTML 
<style>
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
<h1>Título com sombra</h1>
▶ Experimente

Overflow de Texto

Combinado com overflow e white-space para lidar com overflow de texto:

Exemplo

HTML 
<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
}
</style>
<div class="ellipsis">Este é um texto longo que será truncado com elipse</div>
▶ Experimente

❓ Perguntas Frequentes

Q Como definir pilha de fontes para diferentes idiomas?
R Para chinês: `font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;`. Mac usa PingFang SC, Windows usa Microsoft YaHei, fallback para Noto Sans ou system sans-serif.
Q Carregar Google Fonts afeta a velocidade?
R Sim. Google Fonts requer requisições de rede adicionais. Carregue apenas pesos necessários (não carregue todos 300/400/500/700 de uma vez), e adicione o parâmetro `display=swap` para que os navegadores usem fonte fallback primeiro, depois substituam quando a fonte personalizada carregar.
Q Por que text-overflow: ellipsis não funciona às vezes?
R Elipse precisa de três condições simultaneamente: `white-space: nowrap` (sem quebras de linha), `overflow: hidden` (esconde overflow), e `width` ou `max-width` (largura finita). Faltar uma impede de funcionar.

📖 Resumo

📝 Exercícios

  1. Crie uma página de leitura de artigo com título, subtítulo e parágrafos do corpo. Use diferentes fontes, tamanhos e cores para distinguir hierarquia.
  2. Demonstre pelo menos 4 efeitos de text-decoration (sublinhado, sobrescrito, tachado, ondulado).
  3. Implemente "overflow de texto de linha única com elipse" — mostre texto longo em um contêiner de largura fixa com ... para overflow.
  4. Use text-shadow para adicionar efeito de brilho a um título.
100%