Lastnost okrajšava font v CSS

V prejšnji lekciji smo obravnavali številne lastnosti za besedilo. Pogosto je preveč naporno posebej navajati vsako od teh lastnosti, zato v CSS za večjo udobje obstaja posebna lastnost-okrajšava font. Ta lastnost omogoča hkratno nastavitev velikosti pisave, družine, debelosti, ležečega pisava in medvrstnega razmika.

Opisana lastnost ima naslednjo sintakso:

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

Pri tem je vrstni red lastnosti pomemben, in obvezni sta font-size in font-family. Bodite pozorni na to, da druge lastnosti, razen zgoraj opisanih v sintaksi, ne sodelujejo v tej lastnosti okrajšavi.

Poglejmo si primere.

Primer

Recimo, da imamo naslednje sloge:

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

Prepišimo jih z lastnostjo-okrajšavo:

p {
	font: 16px Arial;
}

Primer

Recimo, da imamo naslednje sloge:

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

Prepišimo jih z lastnostjo-okrajšavo:

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

Primer

Recimo, da imamo naslednje sloge:

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

Prepišimo jih z lastnostjo-okrajšavo:

p {
	font: bold 16px Arial;
}

Primer

Recimo, da imamo naslednje sloge:

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

Prepišimo jih z lastnostjo-okrajšavo:

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

Praktične naloge

Skrajšajte kodo z uporabo lastnosti-okrajšave font:

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

Skrajšajte kodo z uporabo lastnosti-okrajšave font:

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

Skrajšajte kodo z uporabo lastnosti-okrajšave font:

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