Propriedade font

A propriedade font é uma propriedade abreviada que permite definir os seguintes propriedades CSS: font-size, font-style, font-weight, line-height, font-family, font-variant.

Sintaxe

cssseletor {
  font: [font-style|font-variant|font-weight] font-size [/line-height] font-family;
}

As propriedades obrigatórias são font-size e font-family, as outras podem ser omitidas, mantendo a ordem.

As propriedades font-style, font-variant, font-weight podem ser reorganizadas em qualquer ordem entre si.

Observe que a propriedade line-height é escrita após uma barra depois da propriedade font-size.

Exemplo

Vamos criar um texto em itálico com tamanho de 15px, tipo Arial, e espaçamento entre linhas de 30px:

html<p>
  some long text
</p>

cssp {
  font: italic 15px/30px Arial;
  text-align: justify;
}

Результат:

Exemplo

Outro exemplo:

html<p>
  some long text
</p>

cssp {
  font: bold 16px/20px "Times New Roman", Georgia, serif;
  text-align: justify;
}

Результат:

Exemplo

Vamos definir apenas o tamanho da fonte e a família, omitindo as outras propriedades:

html<p>
  some long text
</p>

cssp {
  font: 18px Arial;
  text-align: justify;
}

Результат:

Exemplo

Se apenas o tamanho da fonte for definido, ele não será aplicado, pois a família da fonte também deve ser especificada obrigatoriamente:

html<p>
  some long text
</p>

cssp {
  font: 30px;
  text-align: justify;
}

Результат: