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

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.

selector::first-letter {
 /* деякі стилі */
}

Давайте запустимо наступний приклад, щоб побачити, як це працює.

Summary

• font-family specifies the font or fallback fonts for text. You can list multiple fonts to ensure proper rendering;
• font-size defines the text size using absolute units (px) or relative units (em, rem);
• font-weight controls font thickness, either numerically (100–900) or with keywords like normal or bold;
• font-style determines the font's style, such as normal, italic, or oblique;
• Pseudo-class ::first-letter targets and styles the first letter of a text block, enabling creative typography effects.