Свойство-сокращение 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;
}

Нека ги пренапишем чрез свойството-съкращение:

p {
	font: 16px Arial;
}

Пример

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

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

Нека ги пренапишем чрез свойството-съкращение:

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

Пример

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

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

Нека ги пренапишем чрез свойството-съкращение:

p {
	font: bold 16px Arial;
}

Пример

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

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

Нека ги пренапишем чрез свойството-съкращение:

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;
}