Властивість-скорочення font

У попередньому уроці ми з вами розібрали багато властивостей тексту. Найчастіше досить накладно окремо прописувати кожну з цих властивостей, тому в CSS для більшої зручності існує спеціальна властивість-скорочення font. Ця властивість дозволяє одночасно задати розмір шрифту, сімейство, жирність, курсив та міжрядковий інтервал.

Описувана властивість має наступний синтаксис:

курсив жирність розмір_шрифту / міжрядковий_інтервал сімейство

При цьому порядок властивостей має значення, та обов'язковими є "розмір_шрифту" та "сімейство". Зверніть увагу на те, що інші властивості, крім описаних вище в синтаксисі, не входять у цю властивість скорочення.

Давайте подивимося на прикладах.

Приклад

Нехай у нас є наступні стилі:

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