Скраћеница font у CSS-у

У претходној лекцији смо разгледали много својстава за текст. Често је прилично напорно посебно наводити свако од ових својстава, па у CSS-у ради веће погодности постоји специјална скраћеница font. Ово својство омогућава да истовремено задате величину фонта, породицу, дебљину, курзив и висину линије.

Описујуће својство има следећу синтаксу:

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

Притом редослед својстава је битан, а обавезни су font-size и font-family. Обратите пажњу да друга својства, осим оних горе описаних у синтакси, не улазе у ову скраћеницу.

Хајде да погледамо на примерима.

Пример

Нека имамо следеће стилове:

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

Хајде да их препишемо преко скраћенице font:

p {
	font: 16px Arial;
}

Пример

Нека имамо следеће стилове:

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

Хајде да их препишемо преко скраћенице font:

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

Пример

Нека имамо следеће стилове:

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

Хајде да их препишемо преко скраћенице font:

p {
	font: bold 16px Arial;
}

Пример

Нека имамо следеће стилове:

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

Хајде да их препишемо преко скраћенице font:

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

Практични задаци

Скратите код, користећи скраћеницу font:

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

Скратите код, користећи скраћеницу font:

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

Скратите код, користећи скраћеницу font:

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