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>This is a heading</h1>
<p>This is a paragraph using a serif font.</p>
</body>
2.3 Семейство шрифтов sans-serif
Шрифты без засечек (sans-serif) не имеют маленьких линий на концах букв и символов. Эти шрифты выглядят более современно и минималистично, и часто используются для веб-дизайна из-за их хорошей читабельности на экранах.
Примеры шрифтов sans-serif:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a sans-serif font.</p>
</body>
2.4 Семейство шрифтов monospace
Моноширинные шрифты (monospace) имеют одинаковую ширину для всех символов. Такие шрифты часто используются для отображения кода, технической документации и таблиц, где важно, чтобы символы выравнивались по вертикали.
Примеры шрифтов monospace:
- Courier New
- Consolas
- Monaco
- Lucida Console
Пример использования:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a monospace font.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
Для улучшения восприятия и стилистического разнообразия на веб-страницах часто используется комбинация различных семейств шрифтов. Например, заголовки могут быть оформлены с помощью шрифтов serif, а основной текст — с помощью шрифтов sans-serif. Ну а код всегда monospace.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ