A propriedade abreviada font em CSS

Na lição anterior, analisamos muitas propriedades para texto. Muitas vezes é bastante trabalhoso escrever cada uma dessas propriedades separadamente, portanto, no CSS, para maior conveniência, existe uma propriedade abreviada especial font. Esta propriedade permite definir simultaneamente o tamanho da fonte, a família, o peso, o estilo itálico e o entrelinhamento.

A propriedade descrita tem a seguinte sintaxe:

font-style font-weight font-size / line-height font-family

Neste caso, a ordem das propriedades é importante, e font-size e font-family são obrigatórios. Preste atenção ao fato de que outras propriedades, além das descritas acima na sintaxe, não estão incluídas nesta propriedade abreviada.

Vamos ver alguns exemplos.

Exemplo

Suponha que temos os seguintes estilos:

p {
	font-size: 16px;
	font-family: Arial;
}

Vamos reescrevê-los usando a propriedade abreviada:

p {
	font: 16px Arial;
}

Exemplo

Suponha que temos os seguintes estilos:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

Vamos reescrevê-los usando a propriedade abreviada:

p {
	font: 16px/50px Arial;
}

Exemplo

Suponha que temos os seguintes estilos:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

Vamos reescrevê-los usando a propriedade abreviada:

p {
	font: bold 16px Arial;
}

Exemplo

Suponha que temos os seguintes estilos:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

Vamos reescrevê-los usando a propriedade abreviada:

p {
	font: bold italic 16px/50px Arial;
}

Tarefas práticas

Simplifique o código usando a propriedade abreviada font:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

Simplifique o código usando a propriedade abreviada font:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

Simplifique o código usando a propriedade abreviada font:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}