Propriedade font-family
Última atualização: 2026-09-13
font-family Propriedade font-family
A propriedade font-family do CSS especifica uma lista priorizada de nomes de famílias de fontes e/ou famílias genéricas para um elemento. O navegador usa a primeira fonte disponível na lista, seguindo a cadeia quando uma fonte está ausente.
| Categoria | |
|---|---|
| Valor Inicial | depends on user agent |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
font-family: [ <family-name> | <generic-family> ]#;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<family-name> | Tipo | Um nome específico de família de fontes, por exemplo 'Microsoft YaHei' |
<generic-family> | Palavra-chave | Uma família de fontes genérica: serif, sans-serif ou monospace |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-family | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Nomes de fontes que contêm espaços ou caracteres especiais devem ser colocados entre aspas, por exemplo "Times New Roman".
Importante： Termine sempre a lista com uma família genérica (serif, sans-serif, monospace) como reserva final.
❓ Perguntas Frequentes
QQuais fontes devo usar para um site em chinês com CSS?
AUma cadeia de reserva comum entre plataformas é "PingFang SC", "Microsoft YaHei", sans-serif; para o inglês você pode adicionar Helvetica ou Arial primeiro. O Microsoft YaHei é usado no Windows e o PingFang SC no macOS, e o sans-serif genérico ao final garante que o texto seja renderizado em qualquer sistema.
QComo carrego uma fonte web personalizada usando a regra @font-face no CSS?
ADeclare a fonte primeiro com @font-face, por exemplo: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }, e então inclua 'MyFont' na sua lista de font-family. Prefira o formato woff2 para arquivos menores e mantenha uma família genérica no final da lista como reserva.
QA ordem de múltiplos valores de font-family na lista importa?
ASim. O navegador verifica a lista da esquerda para a direita e usa a primeira fonte instalada; as fontes posteriores na lista só são usadas se as anteriores não estiverem disponíveis. Ordene a lista por preferência e termine com uma família genérica (serif, sans-serif, monospace) como reserva final.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
