Перейти к содержанию

Энциклопедия CSS: font-family

Материал из Викижурнал
CSS: color
Тематические порталы
Портал CSS • Портал Веб-разработчиков

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

Синтаксис

Свойство font-family задаётся в виде списка шрифтов, разделённых запятыми. Браузер использует первый доступный шрифт из списка. 

font-family: "Название шрифта 1", "Название шрифта 2", generic-family;

Типы шрифтов

Свойство font-family поддерживает три основных типа шрифтов:

  1. Конкретные шрифты: Шрифты, установленные на системе пользователя, такие как "Arial", "Times New Roman" или "Courier New".
  2. Веб-шрифты: Шрифты, загружаемые из внешних источников, например Google Fonts или других сервисов.
  3. Обобщённые семейства шрифтов: Категории шрифтов, используемые в качестве резервных:
  * serif: Шрифты с засечками, например Times New Roman.
  * sans-serif: Современные шрифты без засечек, например Arial.
  * monospace: Шрифты с одинаковой шириной символов, например Courier.
  * cursive: Декоративные шрифты, имитирующие рукописный текст.
  * fantasy: Украшенные или необычные шрифты.

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

HTML

<body>
    <h1 class="heading">Добро пожаловать в типографику</h1>
    <p class="serif">Этот текст использует шрифт с засечками.</p>
    <p class="sans-serif">Этот текст использует шрифт без засечек.</p>
    <p class="monospace">Этот текст использует моноширинный шрифт.</p>
</body>

CSS

body {
    font-size: 16px;
    line-height: 1.5;
    font-family: "Arial", sans-serif; /* Резерв от Arial к sans-serif */
}

.heading {
    font-family: "Georgia", serif; /* Основной шрифт — Georgia */
}

.serif {
    font-family: "Times New Roman", serif;
}

.sans-serif {
    font-family: "Helvetica", sans-serif;
}

.monospace {
    font-family: "Courier New", monospace;
}

Результат использования свойства

Потестировать код на отдельной странице

Использование веб-шрифтов

Веб-шрифты позволяют использовать шрифты, которые не установлены на системе пользователя. Обычно они подключаются с помощью правила @font-face или через внешние сервисы, такие как Google Fonts.

Пример с Google Fonts

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <h1 style="font-family: 'Roboto', sans-serif;">Этот текст использует шрифт Roboto</h1>
</body>

В этом примере:

  • Тег link импортирует шрифт "Roboto" из Google Fonts.
  • Свойство font-family применяется к заголовку, чтобы использовать подключённый шрифт.

Обобщённое семейство как резерв

Всегда указывайте обобщённое семейство шрифтов в конце списка, чтобы текст отображался даже при отсутствии заданных шрифтов.

Пример: 

font-family: "Open Sans", "Helvetica", "Arial", sans-serif;

Здесь:

  • Браузер сначала пытается использовать "Open Sans", затем "Helvetica", потом "Arial".
  • Если ни один из них недоступен, будет использоваться обобщённое семейство sans-serif.

Поддержка браузерами

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

Рекомендации

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

Заключение

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

Другие статьи о CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Энциклопедия_CSS:_font-family&oldid=13909