2.1 Властивість font-family
Шрифти грають ключову роль у веб-дизайні, впливаючи на читабельність і візуальну привабливість тексту. Сімейства шрифтів визначають загальний стиль і характеристики шрифтів, які можна використовувати на веб-сторінках. У CSS шрифти зазвичай діляться на три основні сімейства: serif, sans-serif і monospace. Розглянемо кожне з них детальніше.
Властивість font-family
Властивість font-family використовується для вказівки сімейства шрифтів. Можна вказати кілька шрифтів, розділяючи їх комами, щоб браузер міг використовувати наступний шрифт у списку, якщо перший недоступний.
Приклад використання кількох шрифтів
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Приклад використання:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>Цей текст відображається з використанням шрифтів Helvetica Neue, Helvetica або Arial.</p>
</body>
2.2 Сімейство шрифтів serif
Шрифти з засічками (serif) характеризуються маленькими лініями або штрихами, доданими до кінців букв і символів. Ці шрифти надають тексту більш традиційний і формальний вигляд.
Приклади шрифтів serif:
- Times New Roman
- Georgia
- Garamond
- Baskerville
Приклад використання:
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>Це заголовок</h1>
<p>Це параграф з використанням шрифту serif.</p>
</body>
2.3 Сімейство шрифтів sans-serif
Шрифти без засічок (sans-serif) не мають маленьких ліній на кінцях букв і символів. Ці шрифти виглядають більш сучасно та мінімалістично, і часто застосовуються для веб-дизайну через їх гарну читабельність на екранах.
Приклади шрифтів sans-serif:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>Це заголовок</h1>
<p>Це параграф з використанням шрифту sans-serif.</p>
</body>
2.4 Сімейство шрифтів monospace
Моноширинні шрифти (monospace) мають однакову ширину для всіх символів. Такі шрифти часто використовуються для відображення коду, технічної документації та таблиць, де важливо, щоб символи вирівнювались вертикально.
Приклади шрифтів monospace:
- Courier New
- Consolas
- Monaco
- Lucida Console
Приклад використання:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>Це заголовок</h1>
<p>Це параграф з використанням шрифту monospace.</p>
<pre>
function helloWorld() {
console.log("Привіт, світ!");
}
</pre>
</body>
Для покращення сприйняття та стилістичного різноманіття на веб-сторінках часто використовується комбінація різних сімейств шрифтів. Наприклад, заголовки можуть бути оформлені за допомогою шрифтів serif, а основний текст — за допомогою шрифтів sans-serif. Ну а код завжди monospace.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ