Vlastnost zkratka font v CSS

V předchozí lekci jsme probrali mnoho vlastností pro text. Často je dost nepraktické samostatně vypisovat každou z těchto vlastností, proto v CSS pro větší pohodlí existuje speciální vlastnost zkratka font. Tato vlastnost umožňuje současně nastavit velikost písma, rodinu, tučnost, kurzívu a řádkový rozestup.

Popsaná vlastnost má následující syntaxi:

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

Přičemž pořadí vlastností má význam, a povinné jsou font-size a font-family. Všimněte si, že jiné vlastnosti, kromě výše popsaných v syntaxi, do této vlastnosti zkratky nepatří.

Podívejme se na příklady.

Příklad

Předpokládejme, že máme následující styly:

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

Přepišme je pomocí vlastnosti zkratky:

p {
	font: 16px Arial;
}

Příklad

Předpokládejme, že máme následující styly:

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

Přepišme je pomocí vlastnosti zkratky:

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

Příklad

Předpokládejme, že máme následující styly:

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

Přepišme je pomocí vlastnosti zkratky:

p {
	font: bold 16px Arial;
}

Příklad

Předpokládejme, že máme následující styly:

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

Přepišme je pomocí vlastnosti zkratky:

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

Praktické úlohy

Zkrátíte kód pomocí vlastnosti zkratky font:

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

Zkrátíte kód pomocí vlastnosti zkratky font:

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

Zkrátíte kód pomocí vlastnosti zkratky font:

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