Svojstvo-skraćenica font u CSS-u

U prethodnoj lekciji smo razmotrili mnoga svojstva za tekst. Često je prilično naporno posebno navoditi svako od ovih svojstava, zato u CSS-u radi veće praktičnosti postoji posebno svojstvo-skraćenica font. Ovo svojstvo omogućava da istovremeno postavite veličinu fonta, porodicu, debljinu, kurziv i visinu između redova.

Opisano svojstvo ima sledeću sintaksu:

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

Pritom redosled svojstava je bitan, i obavezna su font-size i font-family. Obratite pažnju da druga svojstva, osim gore opisanih u sintaksi, ne ulaze u ovo svojstvo skraćenice.

Pogledajmo na primerima.

Primer

Neka imamo sledeće stilove:

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

Prepišimo ih pomoću svojstva-skraćenice:

p {
	font: 16px Arial;
}

Primer

Neka imamo sledeće stilove:

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

Prepišimo ih pomoću svojstva-skraćenice:

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

Primer

Neka imamo sledeće stilove:

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

Prepišimo ih pomoću svojstva-skraćenice:

p {
	font: bold 16px Arial;
}

Primer

Neka imamo sledeće stilove:

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

Prepišimo ih pomoću svojstva-skraćenice:

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

Praktični zadaci

Skratite kod, koristeći svojstvo-skraćenicu font:

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

Skratite kod, koristeći svojstvo-skraćenicu font:

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

Skratite kod, koristeći svojstvo-skraćenicu font:

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