Atributo de estilo de font

Definição e uso

font O atributo é configurado ou retornado na forma abreviada para até seis propriedades de fontes individuais.

Através deste atributo, você pode configurar/retornar o seguinte conteúdo (na ordem abaixo):

font-size e font-family É obrigatório. Se falta qualquer um dos outros valores, será inserido o valor padrão (se houver).

Essas propriedades também podem ser definidas usando propriedades de estilo separadas. Recomenda-se fortemente que os autores não avançados usem propriedades separadas para obter maior controle.

Veja também:

Tutorial CSS:Fonte do CSS

Manual de referência CSS:Propriedade font

Exemplo

Exemplo 1

Definir a fonte do elemento <p>:

document.getElementById("myP").style.font = "italic bold 20px arial,serif";

Experimente você mesmo

Exemplo 2

Retornar a fonte do elemento <p>:

alert(document.getElementById("myP").style.font);

Experimente você mesmo

Sintaxe

Retornar propriedade font:

object.style.font

Definir propriedade font:

object.style.font = "font-style font-variant font-weight font-size/line-height|caption|icon|menu|
message-box|small-caption|status-bar|initial|inherit;"

Valor do atributo

Valor Descrição
style Definir o estilo da fonte.
variant Definir o texto em minúsculas com maiúsculas.
weight Definir a espessura da fonte.
size Definir o tamanho da fonte.
lineHeight Definir o espaçamento entre linhas.
family Definir a fonte.
caption Fonte usada para controles de título (como botões, menus dropdown, etc.).
icon Fonte usada para marcar ícones.
menu Fonte usada em menus.
message-box Fonte usada em caixas de mensagem.
small-caption Fonte usada em pequenos controles.
status-bar Fonte usada na barra de estado da janela.
initial Defina essa propriedade como seu valor padrão. Veja também initial.
inherit Herda essa propriedade do elemento pai. Veja também inherit.

Detalhes técnicos

Valor padrão: Não especificado
Retorno: Cadeia de caracteres, que representa diferentes propriedades de fontes do elemento.
Versão do CSS: CSS1

Suporte do navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte