font-family

CSS-властивість font-family (укр. — “сімейство шрифтів”) використовується для визначення шрифтів, які застосовуються до тексту елемента. Вона дозволяє змінювати тип шрифтів для заголовків, параграфів, кнопок та інших текстових елементів на веб-сторінці. Правильний вибір шрифтів допомагає створити стильний, читабельний і професійний вигляд сайту.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

font-family: "font1", "font2", "font3", ... ;

Значення

  • "font-name" — ім’я шрифта. Це може бути стандартне ім’я шрифта, таке як "Arial", "Verdana", "Georgia", "Times New Roman" тощо. Імена шрифтів потрібно брати в лапки, якщо вони складаються з кількох слів.
  • generic-family — загальна категорія шрифтів. Наприклад:
    • serif — шрифт з засічками, такий як Times New Roman або Georgia.
    • sans-serif — шрифт без засічок, такий як Arial або Helvetica.
    • monospace — шрифт, де всі символи мають однакову ширину, наприклад, Courier New.
    • cursive — шрифт, схожий на рукописний.
    • fantasy — декоративний шрифт для стилізованих заголовків.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • При використанні font-family важливо вказувати резервні шрифти, які будуть використовуватися, якщо основний шрифт не підтримується або недоступний на пристрої користувача. Наприклад: “Arial”, sans-serif — якщо шрифт Arial недоступний, буде використано перший доступний шрифт із категорії sans-serif.
  • У разі, якщо шрифт складається з кількох слів, необхідно обертати його в лапки, наприклад, "Times New Roman".
  • Якщо список шрифтів у font-family не містить жодного доступного шрифта, то веб-браузер використовує стандартний шрифт, визначений для категорії, наприклад, для sans-serif браузер може використовувати шрифт Helvetica або Arial.
  • Використання різних шрифтів для різних елементів сторінки може покращити дизайн та сприяти кращій читабельності, однак важливо не перевантажувати сторінку занадто великою кількістю шрифтів.
  • Підтримується всіма сучасними браузерами.