De CSS font shorthand eigenschap

In de vorige les hebben we veel teksteigenschappen behandeld. Het is vaak behoorlijk omslachtig om elk van deze eigenschappen apart op te schrijven, daarom bestaat er in CSS voor meer gemak een speciale shorthand eigenschap font. Deze eigenschap maakt het mogelijk om tegelijkertijd de lettergrootte, familie, dikte, cursief en regelafstand in te stellen.

De beschreven eigenschap heeft de volgende syntaxis:

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

Hierbij is de volgorde van de eigenschappen van belang, en zijn font-size en font-family verplicht. Let op dat andere eigenschappen, behalve de hierboven in de syntaxis beschreven, niet in deze shorthand eigenschap zitten.

Laten we naar voorbeelden kijken.

Voorbeeld

Stel we hebben de volgende stijlen:

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

Laten we ze herschrijven met de shorthand eigenschap:

p {
	font: 16px Arial;
}

Voorbeeld

Stel we hebben de volgende stijlen:

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

Laten we ze herschrijven met de shorthand eigenschap:

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

Voorbeeld

Stel we hebben de volgende stijlen:

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

Laten we ze herschrijven met de shorthand eigenschap:

p {
	font: bold 16px Arial;
}

Voorbeeld

Stel we hebben de volgende stijlen:

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

Laten we ze herschrijven met de shorthand eigenschap:

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

Praktische opdrachten

Verkort de code door gebruik te maken van de shorthand eigenschap font:

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

Verkort de code door gebruik te maken van de shorthand eigenschap font:

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

Verkort de code door gebruik te maken van de shorthand eigenschap font:

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