Propriedade de Atalho de Fonte

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

font Propriedade de Atalho de Fonte

A propriedade de atalho font do CSS define todas as sub-propriedades relacionadas à fonte em uma única declaração: font-style, font-variant, font-weight, font-stretch, font-size, line-height e font-family. Mantém as folhas de estilo concisas, mas font-size e font-family são obrigatórios e as sub-propriedades devem seguir uma ordem fixa.

Categoria
Valor Inicialnormal normal normal 1em/normal system-ui
HerdadoSim
Aplica-se Aall
Tipo de Animaçãofont-weight
Versão CSSCSS1
StatusPadrão

📝 Sintaxe

font: [ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]? <font-size> [ / <line-height> ]? <font-family>;

⚙️ Valores

ValorTipoDescrição
<font-style> || <font-variant> || <font-weight> || <font-size> / <line-height> || <font-family>ValorAtalho de fonte para todas as sub-propriedades de fonte

▶ Exemplo

Edite o código abaixo e veja o resultado ao vivo no playground:

🌐 Suporte dos Navegadores

Navegador ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
font v1 v12 v1 v1 v1
Suportado em todos os principais navegadores
Importante: font-size e font-family são obrigatórios; se faltar um deles, toda a declaração é ignorada.
Dica: O atalho redefine qualquer sub-propriedade omitida para seus valores iniciais, então declare font antes de outras regras que definem propriedades de fonte individuais.

❓ Perguntas Frequentes

QDevo usar o atalho font ou definir sub-propriedades individualmente?
AUse o atalho quando precisar definir várias propriedades de fonte de uma vez — estilo, peso, tamanho, altura de linha e família — em uma única linha. No entanto, ele redefine cada sub-propriedade omitida para seu valor inicial, então quando você só quer mudar um valor (por exemplo, mudar font-weight para bold), escreva a propriedade completa em vez disso para evitar apagar suas outras configurações.
QA ordem dos valores do atalho font importa no CSS?
ASim. font-style, font-variant, font-weight e font-stretch são opcionais e podem aparecer em qualquer ordem antes de font-size. font-size deve ser seguido por um /line-height opcional, e font-family deve vir por último. Ambos font-size e font-family são obrigatórios — se faltar um, toda a declaração é ignorada.
QO que significa font: italic bold 20px/1.5 'Microsoft YaHei', sans-serif?
ADefine font-style como italic, font-weight como bold, font-size como 20px e line-height como 1,5 vezes o tamanho da fonte. A lista font-family tenta Microsoft YaHei primeiro e recorre ao sans-serif genérico se não estiver instalado. Sub-propriedades omitidas como font-variant são redefinidas para seu valor inicial normal.

📚 Tutoriais Relacionados

Web-Tutorial.com

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.

100%