Урок 41 із 239
17%
← Назад

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

Навчіться використовувати скорочений запис font для одночасного налаштування текстових властивостей.

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

У CSS є спеціальна властивість font, яка дозволяє одночасно задати декілька параметрів тексту.

За допомогою font можна встановити стиль, жирність, розмір, міжрядковий інтервал та сімейство шрифту.

Синтаксис властивості font має такий порядок: font-style font-weight font-size / line-height font-family.

Обов'язковими є тільки font-size та font-family. Інші властивості можна не вказувати.

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

Приклади використання font

/* Окремі властивості */

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

/* Скорочений запис */

p {
  font: 16px Arial;
}
/* З line-height */

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-styleКурсивний або звичайний текст
font-weightЖирність тексту
font-sizeРозмір шрифту
line-heightВисота рядка
font-familyСімейство шрифту
❗ Важливо:

Властивість font не включає всі текстові властивості CSS. Наприклад, color, width або text-indent потрібно задавати окремо.

📌 Завдання:
  1. Скоротіть код за допомогою властивості font.
  2. Замініть окремі властивості font-family, font-size та line-height.
  3. Виконайте всі три практичні завдання з уроку.
💡 Показати підказку

Пам'ятайте порядок: font-style → font-weight → font-size/line-height → font-family.

✅ Показати відповідь
/* №1 */

p {
  font: 13px/20px "Times New Roman";
}


/* №2 */

p {
  width: 300px;
  color: red;
  font: bold 40px Arial;
}


/* №3 */

p {
  text-indent: 50px;
  font: bold italic 40px/60px Arial;
}