CSS font-Shorthand-Eigenschaft

In der vorherigen Lektion haben wir viele Texteigenschaften behandelt. Es ist oft recht aufwändig, jede dieser Eigenschaften separat anzugeben. Daher gibt es in CSS zur größeren Bequemlichkeit eine spezielle Shorthand-Eigenschaft font. Diese Eigenschaft erlaubt es gleichzeitig, die Schriftgröße, Familie, Dicke, Kursivstellung und den Zeilenabstand festzulegen.

Die beschriebene Eigenschaft hat die folgende Syntax:

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

Dabei ist die Reihenfolge der Eigenschaften bedeutsam, und obligatorisch sind font-size und font-family. Beachten Sie, dass andere Eigenschaften außer den oben in der Syntax beschriebenen nicht in diese Shorthand-Eigenschaft aufgenommen werden.

Sehen wir uns Beispiele an.

Beispiel

Angenommen, wir haben die folgenden Stile:

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

Schreiben wir sie mit der Shorthand-Eigenschaft um:

p {
	font: 16px Arial;
}

Beispiel

Angenommen, wir haben die folgenden Stile:

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

Schreiben wir sie mit der Shorthand-Eigenschaft um:

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

Beispiel

Angenommen, wir haben die folgenden Stile:

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

Schreiben wir sie mit der Shorthand-Eigenschaft um:

p {
	font: bold 16px Arial;
}

Beispiel

Angenommen, wir haben die folgenden Stile:

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

Schreiben wir sie mit der Shorthand-Eigenschaft um:

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

Praktische Aufgaben

Kürzen Sie den Code mit der Shorthand-Eigenschaft font:

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

Kürzen Sie den Code mit der Shorthand-Eigenschaft font:

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

Kürzen Sie den Code mit der Shorthand-Eigenschaft font:

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