Vlastnosť-skratka font v CSS

V predchádzajúcej lekcii sme prešli veľa vlastností pre text. Často je dosť náročné samostatne vypisovať každú z týchto vlastností, preto v CSS pre väčšie pohodlie existuje špeciálna vlastnosť-skratka font. Táto vlastnosť umožňuje súčasne nastaviť veľkosť písma, rodinu, hrúbku, kurzívu a medziriadkový interval.

Opisovaná vlastnosť má nasledujúcu syntax:

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

Pričom poradie vlastností má význam, a povinnými sú font-size a font-family. Dávajte pozor na to, že ďalšie vlastnosti, okrem opísaných vyššie v syntaxi, nevnútri tejto vlastnosti skratky.

Pozrime sa na príklady.

Príklad

Nech máme nasledujúce štýly:

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

Prepíšme ich cez vlastnosť-skratku:

p {
	font: 16px Arial;
}

Príklad

Nech máme nasledujúce štýly:

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

Prepíšme ich cez vlastnosť-skratku:

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

Príklad

Nech máme nasledujúce štýly:

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

Prepíšme ich cez vlastnosť-skratku:

p {
	font: bold 16px Arial;
}

Príklad

Nech máme nasledujúce štýly:

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

Prepíšme ich cez vlastnosť-skratku:

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

Praktické úlohy

Skráťte kód pomocou vlastnosti-skratky font:

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

Skráťte kód pomocou vlastnosti-skratky font:

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

Skráťte kód pomocou vlastnosti-skratky font:

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