Пошук уроків, статей та іншого контенту
Вивчіть властивості шрифтів і налаштуйте сімейство, розмір та стиль тексту за допомогою CSS.
За замовчуванням браузер використовує власний шрифт для тексту. Властивість font-family дає змогу вибрати шрифт для елемента.
body {
font-family: Arial, sans-serif;
}У цьому прикладі:
Arial — основний шрифт;
sans-serif — запасне сімейство шрифтів.
Якщо на пристрої користувача немає Arial, браузер вибере будь-який доступний шрифт без зарубок завдяки sans-serif.
CSS має узагальнені назви сімейств:
serif — шрифти із зарубками;
sans-serif — шрифти без зарубок;
monospace — моноширинні шрифти, у яких усі символи мають однакову ширину;
cursive — рукописні шрифти;
fantasy — декоративні шрифти.
Зазвичай для основного тексту використовують sans-serif або serif, а для фрагментів коду — monospace.
Якщо назва шрифту складається з кількох слів, її потрібно взяти в лапки:
body {
font-family: "Trebuchet MS", Arial, sans-serif;
}Шрифти записують від найкращого варіанта до запасного. Браузер перевіряє їх зліва направо.
Властивість font-size змінює розмір тексту.
h1 {
font-size: 36px;
}
p {
font-size: 18px;
}Одиниця px означає пікселі. Це абсолютна одиниця, яку легко використовувати на початковому етапі.
Для розміру шрифту часто використовують rem. Один rem дорівнює розміру шрифту кореневого елемента сторінки, зазвичай html.
html {
font-size: 16px;
}
p {
font-size: 1rem;
}
.large-text {
font-size: 1.5rem;
}У цьому прикладі:
1rem дорівнює 16px;
1.5rem дорівнює 24px.
Відносні одиниці дають змогу зручно змінювати масштаб тексту для всієї сторінки.
Одиниця em залежить від розміру шрифту батьківського елемента:
article {
font-size: 20px;
}
article p {
font-size: 0.8em; /* 80% від 20px, тобто 16px */
}На початку роботи з CSS зручно використовувати px для простих прикладів і rem для основних розмірів сторінки.
Властивість font-style визначає накреслення тексту.
.normal-text {
font-style: normal;
}
.italic-text {
font-style: italic;
}
.oblique-text {
font-style: oblique;
}Основні значення:
normal — звичайний текст;
italic — курсив;
oblique — похилий текст.
Найчастіше використовують normal та italic.
HTML-елемент em зазвичай має семантичне значення — він позначає логічний наголос. Якщо потрібно лише візуально нахилити текст, це можна зробити за допомогою CSS:
<p>
Це <em>важливий</em> фрагмент тексту.
</p>em {
font-style: italic;
}Розглянемо невелику сторінку, у якій налаштовано сімейство, розмір і стиль шрифту.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Властивості шрифту</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-style: normal;
}
.description {
font-size: 1.125rem;
font-style: italic;
}
.code {
font-family: monospace;
font-size: 14px;
font-style: normal;
}
</style>
</head>
<body>
<h1>Моя сторінка</h1>
<p class="description">
Це короткий опис сторінки, написаний курсивом.
</p>
<p class="code">
const message = "Привіт!";
</p>
</body>
</html>У прикладі:
для всієї сторінки встановлено Arial;
заголовок використовує Georgia і має розмір 36px;
опис має розмір 1.125rem та курсивний стиль;
фрагмент коду використовує моноширинне сімейство monospace.
Один і той самий параметр можна застосувати до кількох елементів за допомогою групового селектора:
h1,
h2,
h3 {
font-family: Georgia, serif;
}
p,
li {
font-family: Arial, sans-serif;
}Так заголовки матимуть одне сімейство шрифту, а звичайний текст — інше.
Клас дає змогу налаштувати конкретні елементи:
.note {
font-size: 18px;
font-style: italic;
}<p class="note">Це важлива примітка.</p>Властивості шрифту можна об’єднати у властивості font. Для початківців окремі властивості часто зрозуміліші, але скорочений запис також важливо вміти читати:
p {
font: italic 18px Arial, sans-serif;
}Порядок у цьому прикладі:
italic — стиль;
18px — розмір;
Arial, sans-serif — сімейство.
Під час використання font потрібно обов’язково вказати розмір і сімейство шрифту:
h1 {
font: normal 36px Georgia, serif;
}Створіть сторінку з такими вимогами:
Для всієї сторінки встановіть шрифт Arial, а запасним сімейством — sans-serif.
Для заголовка встановіть шрифт Georgia, розмір 32px і звичайний стиль.
Для абзацу встановіть розмір 18px.
Для примітки встановіть курсивний стиль і запасне сімейство serif.
Один із можливих варіантів CSS:
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: Georgia, serif;
font-size: 32px;
font-style: normal;
}
p {
font-size: 18px;
}
.note {
font-family: serif;
font-style: italic;
}Не варто вказувати лише один шрифт:
body {
font-family: Arial;
}Краще додати запасне сімейство:
body {
font-family: Arial, sans-serif;
}Неправильно:
body {
font-family: Trebuchet MS, sans-serif;
}Правильно:
body {
font-family: "Trebuchet MS", sans-serif;
}Для font-size потрібно вказувати одиницю:
p {
font-size: 18px;
}Запис без одиниці не працює:
p {
font-size: 18;
}Винятком є спеціальні числові значення, наприклад 0.
font-style і font-weightfont-style відповідає за нахил тексту:
p {
font-style: italic;
}font-weight відповідає за товщину шрифту. Він не є частиною цієї теми, тому для зміни нахилу потрібно використовувати саме font-style.
Курсивом краще виділяти короткі фрагменти або примітки. Якщо застосувати його до великого обсягу тексту, читати такий текст буде складніше.
font-family задає сімейство шрифту.
Після основного шрифту варто вказувати запасний варіант.
Назви шрифтів із кількох слів потрібно брати в лапки.
font-size задає розмір тексту.
px — проста абсолютна одиниця, а rem та em — відносні одиниці.
font-style: normal задає звичайний стиль.
font-style: italic задає курсив.
font-style: oblique задає похилий текст.
Властивість font об’єднує кілька властивостей шрифту в один запис.