Розуміння та Використання Властивостей Шрифтів
Розглянемо найпоширеніші властивості, пов’язані зі шрифтами.
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 */
}
Запустіть наступний приклад, щоб побачити, як це працює.
index.html
styles.css
Підсумок
font-familyвизначає шрифт або запасні шрифти для тексту. Можна вказати декілька шрифтів для коректного відображення;font-sizeзадає розмір тексту з використанням абсолютних (px) або відносних (em, rem) одиниць;font-weightконтролює товщину шрифту, як числовими значеннями (100–900), так і ключовими словами, наприклад,normalабоbold;font-styleвизначає стиль шрифту, наприклад,normal,italicабоoblique;- Псевдоклас
::first-letterдозволяє вибрати та стилізувати першу літеру текстового блоку, забезпечуючи креативні типографічні ефекти.
1. Яка властивість визначає товщину шрифту?
2. Яке значення за замовчуванням має властивість font-style у CSS?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain the difference between px, em, and rem units for font-size?
How do I choose the best font-family for my website?
Can you show examples of using the ::first-letter pseudo-class?
Awesome!
Completion rate improved to 2.56Розуміння та Використання Властивостей Шрифтів
Свайпніть щоб показати меню
Розглянемо найпоширеніші властивості, пов’язані зі шрифтами.
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 */
}
Запустіть наступний приклад, щоб побачити, як це працює.
index.html
styles.css
Підсумок
font-familyвизначає шрифт або запасні шрифти для тексту. Можна вказати декілька шрифтів для коректного відображення;font-sizeзадає розмір тексту з використанням абсолютних (px) або відносних (em, rem) одиниць;font-weightконтролює товщину шрифту, як числовими значеннями (100–900), так і ключовими словами, наприклад,normalабоbold;font-styleвизначає стиль шрифту, наприклад,normal,italicабоoblique;- Псевдоклас
::first-letterдозволяє вибрати та стилізувати першу літеру текстового блоку, забезпечуючи креативні типографічні ефекти.
1. Яка властивість визначає товщину шрифту?
2. Яке значення за замовчуванням має властивість font-style у CSS?
Дякуємо за ваш відгук!
