0Pricing
CSS Academy · Урок

Семейство шрифтов и безопасные для веба шрифты

Задавайте семейства шрифтов и разберитесь, какие шрифты безопасно использовать во всех браузерах.

«Семейство шрифтов и безопасные для веба шрифты» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Свойство font-family

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

<p>This text renders in the page's body font stack.</p>

Универсальные семейства шрифтов

CSS определяет пять универсальных семейств, используемых как резервные варианты:

  • serif — шрифты с декоративными засечками (Times, Georgia)
  • sans-serif — шрифты без засечек (Arial, Helvetica)
  • monospace — шрифты с фиксированной шириной символов (Courier, Consolas)
  • cursive — рукописные шрифты
  • fantasy — декоративные шрифты для оформления

Шрифты, безопасные для веба

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

  • Без засечек: Arial, Helvetica, Verdana, Trebuchet MS
  • С засечками: Georgia, Times New Roman
  • Моноширинные: Courier New, Consolas

Названия шрифтов с пробелами

Названия шрифтов, содержащие пробелы, необходимо заключать в кавычки:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

Рекомендации по стеку шрифтов

Создавайте стек шрифтов, добавляя:

  1. предпочтительный шрифт (он может быть не установлен)
  2. один или два похожих резервных шрифта
  3. универсальное семейство в качестве последнего варианта
<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

Системные шрифты интерфейса

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

<p class="system-ui-text">This uses your OS's native UI font.</p>

Моноширинные стеки для кода

Редакторам кода и терминалам нужен моноширинный стек:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

Наследование font-family

Большинство элементов наследует font-family от родительского элемента. Некоторые элементы форм (<input>, <textarea>) в отдельных браузерах не наследуют его по умолчанию — задавайте свойство для них явно:

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

Проверка доступных шрифтов

Проверить наличие системного шрифта можно с помощью функции local() внутри @font-face. Браузеры сначала пытаются найти шрифт локально и только потом загружают его.

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

Выборка по диапазонам Unicode

При загрузке шрифтов используйте unicode-range в @font-face, чтобы загружать только нужные диапазоны символов и уменьшить размер загрузки для многоязычных сайтов.

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

Обзор вариативных шрифтов

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

Проверка

Какое универсальное семейство шрифтов следует использовать в качестве последнего резервного варианта для стека шрифтов без засечек?

Итоги

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

Часто задаваемые вопросы

Урок «Семейство шрифтов и безопасные для веба шрифты» бесплатный?

Да — полный текст урока «Семейство шрифтов и безопасные для веба шрифты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Семейство шрифтов и безопасные для веба шрифты»?

Задавайте семейства шрифтов и разберитесь, какие шрифты безопасно использовать во всех браузерах. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Семейство шрифтов и безопасные для веба шрифты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Семейство шрифтов и безопасные для веба шрифты
  2. Размер, насыщенность и стиль шрифта
  3. Выравнивание, оформление и интервалы текста
  4. Google Fonts и @font-face
← Назад к CSS Academy