Розглянемо найпоширеніші властивості, пов’язані зі шрифтами.

selector {
  font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
  font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
  font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
  font-style: normal | italic | oblique; /* only these values available */
}

Примітка

Усі приклади будуть продемонстровані з використанням одного й того ж текстового вмісту, щоб надати можливість спостерігати, як один і той самий текст може відображатися по-різному.

font-family

Властивість font-family визначає гарнітуру або гарнітури шрифту, які будуть використані для відображення текстового вмісту. Можна вказати як одну назву гарнітури, так і список із кількох назв, розділених комами.

font-size

Властивість font-size встановлює розмір шрифту для відображення текстового вмісту. Може бути задана як фіксований розмір у px або як відносний розмір у одиницях em чи rem.

font-weight

Властивість font-weight визначає товщину або насиченість шрифту, який використовується для відображення тексту. Може задаватися числовим значенням (наприклад, 300, 500, 700, ...) або ключовим словом (наприклад, lighter, normal чи bold).

font-style

Властивість font-style визначає стиль шрифту, який буде використовуватися для текстового вмісту. Може бути normal (значення за замовчуванням), italic або oblique.

Псевдоклас ::first-letter

Псевдоклас first-letter вибирає та стилізує першу літеру абзацу або заголовка. Для використання цього псевдокласу необхідно поставити подвійні двокрапки :: після селектора та додати ключове слово first-letter.

selector::first-letter {
 /* some styles */
}

Запустіть наступний приклад, щоб побачити, як це працює.

Підсумок

• font-family визначає шрифт або запасні шрифти для тексту. Можна вказати декілька шрифтів для коректного відображення;
• font-size задає розмір тексту з використанням абсолютних (px) або відносних (em, rem) одиниць;
• font-weight контролює товщину шрифту, як числовими значеннями (100–900), так і ключовими словами, наприклад, normal або bold;
• font-style визначає стиль шрифту, наприклад, normal, italic або oblique;
• Псевдоклас ::first-letter дозволяє вибрати та стилізувати першу літеру текстового блоку, забезпечуючи креативні типографічні ефекти.