Właściwość-skrót font w CSS

W poprzedniej lekcji omówiliśmy wiele właściwości dla tekstu. Często dość uciążliwe jest osobne przepisywanie każdej z tych właściwości, dlatego w CSS dla większej wygody istnieje specjalna właściwość-skrót font. Ta właściwość pozwala jednocześnie ustawić rozmiar czcionki, rodzinę, grubość, kursywę oraz interlinię.

Opisywana właściwość ma następującą składnię:

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

Jednakże kolejność właściwości ma znaczenie, a obowiązkowymi są font-size i font-family. Zwróć uwagę, że inne właściwości, poza opisanymi powyżej w składni, nie wchodzą w skład tej właściwości skrótu.

Spójrzmy na przykłady.

Przykład

Załóżmy, że mamy następujące style:

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

Przepiszmy je za pomocą właściwości-skrótu:

p {
	font: 16px Arial;
}

Przykład

Załóżmy, że mamy następujące style:

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

Przepiszmy je za pomocą właściwości-skrótu:

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

Przykład

Załóżmy, że mamy następujące style:

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

Przepiszmy je za pomocą właściwości-skrótu:

p {
	font: bold 16px Arial;
}

Przykład

Załóżmy, że mamy następujące style:

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

Przepiszmy je za pomocą właściwości-skrótu:

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

Zadania praktyczne

Skróć kod, używając właściwości-skrótu font:

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

Skróć kod, używając właściwości-skrótu font:

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

Skróć kod, używając właściwości-skrótu font:

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