Робота зі шрифтами та їх властивостями
Свайпніть щоб показати меню
Шрифти суттєво впливають на тон і читабельність веб-сторінки.
У цьому розділі розглядаються найпоширеніші CSS-властивості, пов’язані зі шрифтами: font-family, font-size, font-weight та font-style.
Усі приклади використовують однаковий текст, щоб показати, як ці властивості змінюють вигляд.
font-family
Властивість font-family визначає, який шрифт використовується для відображення тексту.
p {
font-family: 'Montserrat', Arial, sans-serif;
}
Можна вказати кілька шрифтів як запасні варіанти, розділені комами. Якщо перший шрифт недоступний, браузер використовує наступний у списку. Рекомендується завжди додавати загальний запасний варіант, наприклад: serif, sans-serif, monospace.
font-size
Властивість font-size визначає розмір відображення тексту.
p {
font-size: 16px;
}
Поширені одиниці виміру:
px: фіксований розмір;em: відносно батьківського елемента;rem: відносно кореневого елемента.
font-weight
Визначає товщину тексту. Числові значення: 100–900. Ключові слова: normal, bold, lighter.
font-style
Вказує стиль тексту: normal, italic або oblique.
Псевдоклас ::first-letter
::first-letter застосовується до першої літери елемента (зазвичай абзацу або заголовка), дозволяючи створювати декоративні або стилізовані ефекти.
selector::first-letter {
/* some styles */
}
Запустіть наступний приклад, щоб побачити, як це працює.
index.html
styles.css
font-family визначає гарнітуру та запасні шрифти.
font-size керує розміром тексту у px, em або rem.
font-weight регулює товщину за допомогою чисел або ключових слів.
font-style змінює стиль шрифту.
::first-letter стилізує першу літеру текстового блоку.
1. Яка властивість визначає товщину шрифту?
2. Яке значення за замовчуванням має властивість font-style у CSS?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат