CSS: Texto e Fontes CSS

Última atualização: 2026-10-13

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 nesta seção: font-family font-size font-weight font-style line-height font color text-align left right text-decoration text-indent letter-spacing word-spacing text-transform text-shadow text-overflow overflow white-space width max-width

1. Propriedades de Fonte

(1) 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

(2) 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

▶ Experimente

2. Propriedades de Texto

(1) 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`)

(2) Alinhamento de Texto

▶ Exemplo

▶ Experimente

(3) Decoração de Texto

▶ Exemplo

▶ Experimente

(4) 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

▶ Experimente

(5) Overflow de Texto

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

▶ Exemplo

▶ Experimente

❓ Perguntas Frequentes

P 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.

P 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.

P 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

Texto é o conteúdo principal das páginas web; propriedades de fonte e texto CSS permitem controlar com precisão a aparência de cada caractere
Da seleção de fonte e tamanho à altura da linha, alinhamento, recuo e sombra — combinar corretamente essas propriedades melhora muito a experiência de leitura
Lembre-se: altura da linha do corpo 1.5-1.8, recuo da primeira linha text-indent: 2em, overflow de texto text-overflow: ellipsis

📝 Exercícios

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.
Demonstre pelo menos 4 efeitos de text-decoration (sublinhado, sobrescrito, tachado, ondulado).
Implemente "overflow de texto de linha única com elipse" — mostre texto longo em um contêiner de largura fixa com ... para overflow.
Use text-shadow para adicionar efeito de brilho a um título.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós