Главная страница » CSS » 18. Семейство шрифта

18. Семейство шрифта

Семейство шрифта (или font-family) определяет типографическое оформление текста на веб-странице. Оно позволяет задать один или несколько шрифтов, которые браузер будет использовать для отображения текста. Важно правильно выбирать и использовать семейства шрифтов, чтобы улучшить визуальную привлекательность и читаемость вашего сайта.

Свойство `font-family`

font-family — это CSS-свойство, которое позволяет определить шрифты, используемые для текста. Можно указать несколько шрифтов в одном свойстве, чтобы браузер использовал доступный шрифт из списка.

Основные синтаксические структуры:

Семейство шрифта

				
					p {
    font-family: Arial, sans-serif; /* Использует Arial, если он доступен, иначе sans-serif */
}

Семейство шрифта и запасной шрифт

				
					p {
    font-family: "Times New Roman", serif; /* Использует Times New Roman, если он доступен, иначе serif */
}

Семейство шрифта с дефисами

				
					h1 {
    font-family: "Open Sans", Arial, sans-serif; /* Использует Open Sans, если он доступен, иначе Arial, если он доступен, иначе sans-serif */
}

Примечание: Если шрифт имеет пробелы в названии, его нужно заключать в двойные кавычки.

Типы шрифтов

С системные шрифты: Шрифты, которые уже установлены на большинстве операционных систем и устройств. Они обеспечивают быструю загрузку и хорошую совместимость.

				
					body {
    font-family: Arial, Helvetica, sans-serif; /* Системные шрифты */
}

Шрифты веб-покрытия: Шрифты, которые загружаются с помощью служб шрифтов (например, Google Fonts или Adobe Fonts). Они позволяют использовать шрифты, которые не установлены на устройстве пользователя.

				
					@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif; /* Веб-шрифт Roboto */
}

Шрифты по умолчанию: Общие категории шрифтов, такие как serif, sans-serif, monospace, cursive и fantasy, которые могут быть использованы в качестве запасных вариантов.

				
					p {
    font-family: serif; /* Использует шрифт с засечками */
}

Примеры использования

Пример 1: Простой выбор шрифта

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-family: Arial, sans-serif; /* Использует Arial или sans-serif */
        }
    </style>
</head>
<body>
    <p>Этот текст будет отображаться шрифтом Arial, если он доступен. В противном случае будет использован шрифт sans-serif.</p>
</body>
</html>

Пример 2: Веб-шрифты

				
					<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <style>
        body {
            font-family: 'Roboto', sans-serif; /* Использует веб-шрифт Roboto */
        }
    </style>
</head>
<body>
    <p>Этот текст будет отображаться шрифтом Roboto, загруженным с Google Fonts. В случае отсутствия шрифта Roboto будет использован sans-serif.</p>
</body>
</html>

Пример 3: Классы и семейства шрифтов

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .serif-font {
            font-family: "Times New Roman", serif; /* Системный шрифт с засечками */
        }
        .sans-serif-font {
            font-family: Arial, Helvetica, sans-serif; /* Системный шрифт без засечек */
        }
        .monospace-font {
            font-family: "Courier New", monospace; /* Моноширинный шрифт */
        }
    </style>
</head>
<body>
    <p class="serif-font">Этот текст использует шрифт с засечками.</p>
    <p class="sans-serif-font">Этот текст использует шрифт без засечек.</p>
    <p class="monospace-font">Этот текст использует моноширинный шрифт.</p>
</body>
</html>

Распространённые ошибки

Неправильное указание шрифтов: Не указывайте шрифты без запятых и кавычек, если это необходимо. Всегда используйте кавычки для шрифтов с пробелами.
Отсутствие запасных шрифтов: Всегда указывайте запасные шрифты после основных шрифтов. Это обеспечивает корректное отображение текста, если основной шрифт недоступен.
Неоптимизированные веб-шрифты: Использование большого количества веб-шрифтов или слишком многих вариаций может замедлить загрузку страницы. Выбирайте только те веса и стили, которые действительно необходимы.

Заключение

Свойство font-family позволяет управлять типографическим оформлением текста на веб-странице. Правильное использование семейства шрифтов помогает улучшить визуальное восприятие контента и обеспечивает хорошую читаемость. Учитывайте поддержку шрифтов на различных устройствах и браузерах для достижения оптимальных результатов.

Тестовое задание

Создайте HTML-документ с несколькими элементами текста (заголовки, абзацы и списки).
Примените разные семейства шрифтов к этим элементам, используя системные и веб-шрифты.
Попробуйте указать несколько шрифтов для одного элемента и протестируйте, как отображается текст в случае отсутствия указанных шрифтов.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
    <style>
        h1 {
            font-family: 'Open Sans', Arial, sans-serif; /* Веб-шрифт Open Sans */
        }
        p {
            font-family: 'Georgia', serif; /* Системный шрифт с засечками */
        }
        code {
            font-family: 'Courier New', monospace; /* Моноширинный шрифт */
        }
        ul {
            font-family: 'Verdana', sans-serif; /* Системный шрифт без засечек */
        }
    </style>
</head>
<body>
    <h1>Заголовок первого уровня</h1>
    <p>Этот параграф использует шрифт Georgia. Он представляет собой шрифт с засечками, предоставляемый системой.</p>
    <p>Параграфы в этом документе могут использовать разные шрифты в зависимости от их класса и семейства шрифтов.</p>
    <code>Этот текст отображается с использованием моноширинного шрифта Courier New.</code>
    <ul>
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
    </ul>
</body>
</html>

Выполнив это задание, вы получите практическое представление о том, как использовать различные семейства шрифтов в CSS для улучшения внешнего вида текста на веб-странице.