Властивості шрифту

Властивість font-size

font-size - це властивість, яка встановлює розмір шрифту тексту. Ця властивість може бути вказана в різних одиницях вимірювання, таких як пікселі (px), ем (em), відсотки (%), а також інші одиниці вимірювання, які вказують на розмір тексту відносно інших елементів сторінки або відносно розміру шрифту батьківського елемента.

За замовчуванням браузер встановлює розмір шрифту 16px.

Використання відносних одиниць вимірювання, таких як em або %, може бути корисним для створення гнучких та адаптивних дизайнів, оскільки вони змінюються відносно розміру шрифту батьківського елемента.

Властивість font-weight

font-weight - це властивість, яка встановлює товщину шрифта тексту. Шрифти можуть мати різні варіанти товщини, такі як звичайний (normal), тонкий (light), жирний (bold), іноді є інші варіанти, залежно від конкретного шрифта.

Задають це значення числом від 100 до 900 з кроком 100.

font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Існують і зарезервовані назви відповідної жирності шрифту.

• 100 - Thin

• 200 - ExtraLight

• 300 - Light

• 400 - Regular (default)

• 500 - Medium

• 600 - SemiBold

• 700 - Bold

• 800 - ExtraBold

• 900 - Black

Але у веброзробці все ж заведено задавати цей параметр числом.

Властивість font-style

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

font-style: normal | italic | oblique | initial | inherit

Зазвичай за замовчанням значення normal.

Властивість font-family

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

Можна вказувати конкретні імена шрифтів, такі як Arial, Times New Roman, або використовувати загальні назви сімейств шрифтів, такі як sans-serif, serif, monospace, або вказувати зовнішні шрифти з інших ресурсів, наприклад, з Google Fonts.

Розберемо сімейства шрифтів:

• serif - шрифти із засічками

• sans-serif - шрифти без засічок

• monospace - моноширинні шрифти (всі символи однакової ширини)

• декоративні шрифти

• рукописні шрифти

h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

Перевірити який шрифт відобразився у браузері можна у інструментах розробника у вкладинці Computed.