Unicode-range и производительность: когда браузер не скачивает лишнее

Unicode-range помогает браузеру выбирать только те файлы веб-шрифта, в которых есть нужные странице символы. Если разделить гарнитуру на наборы для латиницы, кириллицы и специальных знаков, браузер сможет не загружать часть ресурсов, которая не используется в тексте. В статье разберём принцип работы, ограничения CSS и практическую настройку.

Дата актуальности: 22 июля 2026 года. Материал посвящён оптимизации веб-шрифтов, CSS-правилу unicode-range, подмножествам шрифтов и влиянию этих настроек на сетевые запросы, размер ресурсов и скорость отображения текста.

Unicode-range — дескриптор правила @font-face, который описывает диапазон Unicode-символов, поддерживаемых конкретным файлом шрифта. Он не создаёт новый шрифт и не вырезает символы из файла самостоятельно. Дескриптор сообщает браузеру, для каких кодовых позиций предназначен ресурс, чтобы движок мог сопоставить текст на странице с подходящим файлом.

Обычно unicode-range применяют вместе с несколькими файлами одной гарнитуры. Например, один файл содержит латинские символы, второй — кириллицу, третий — расширенную пунктуацию. Все файлы могут иметь одинаковые font-family, font-style и font-weight, но разные диапазоны символов. Браузер рассматривает их как части одной типографической системы.

При разборе страницы браузер видит текстовые узлы, вычисленные CSS-свойства и доступные объявления @font-face. Если символы текста попадают в unicode-range конкретного объявления, ресурс становится кандидатом на загрузку. Если диапазон не пересекается с используемыми символами, соответствующий файл обычно не требуется для отрисовки этого текста.

Решение зависит не только от unicode-range. Браузер также учитывает семейство шрифта, начертание, насыщенность, формат ресурса, порядок объявлений и наличие локально установленной гарнитуры. Поэтому само наличие нескольких диапазонов не гарантирует уменьшение числа запросов: оптимизация работает только тогда, когда файлы действительно разделены по содержимому и корректно связаны с текстом страницы.

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

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

Представим сайт на русском языке с англоязычными названиями брендов. Для него можно подготовить два файла одной гарнитуры: latin.woff2 с базовой латиницей и cyrillic.woff2 с кириллическими символами. Оба ресурса объявляются через @font-face с одинаковым семейством и начертанием, а различие задаётся дескриптором unicode-range.

Упрощённая логика CSS выглядит так: объявление для latin.woff2 содержит диапазоны U+0000–00FF и дополнительные латинские блоки, а объявление для cyrillic.woff2 — диапазоны U+0400–U+04FF и связанные расширения. Точные диапазоны зависят от состава файла. Нельзя без проверки копировать универсальный список кодовых позиций: он должен соответствовать фактическим символам подмножества.

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

Дескриптор unicode-range отвечает на вопрос «для каких символов нужен этот файл», а свойство font-display — «как вести себя тексту во время загрузки шрифта». Font-display может разрешить временно показать системный шрифт, скрыть текст на короткий период или заменить резервный шрифт после загрузки. Эти механизмы дополняют друг друга, но не заменяют один другой.

Для производительности важно настроить обе части отдельно. Разделение на подмножества уменьшает объём ресурсов, а font-display снижает риск невидимого текста во время ожидания. При этом резкая замена резервного шрифта может вызвать скачок ширины строк и смещение содержимого. Поэтому после настройки проверяйте не только сетевые запросы, но и визуальное поведение страницы.

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

Третья причина — на странице используется несколько начертаний. Отдельные файлы для normal, italic, 500 и 700 могут загружаться независимо от деления по письменностям. Если текст содержит кириллицу и одновременно применяет два начертания, экономия от одного подмножества не отменяет необходимость загрузки второго файла.

Четвёртая причина — ресурс запрашивается заранее. Неправильно выбранный preload может заставить браузер скачать файл, даже если конкретный сценарий его почти не использует. Предварительную загрузку применяйте только к действительно критичному шрифту и согласуйте её с font-family, начертанием и диапазоном символов.

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

После этого сформируйте отдельные файлы в современном формате, например WOFF2, и проверьте, что каждый файл содержит именно заявленные символы. Названия файлов лучше делать понятными: family-cyrillic-400.woff2, family-latin-400.woff2 или family-symbols-400.woff2. Такая схема упрощает аудит сетевых запросов и обслуживание CSS.

Затем объявите ресурсы в @font-face. Для каждого варианта укажите одинаковые font-family и font-weight, правильный font-style, формат файла и соответствующий unicode-range. Если диапазоны разделяют языки, убедитесь, что fallback-шрифт поддерживает отсутствующие символы и не создаёт заметного несоответствия по высоте, ширине и насыщенности.

Вкладка Network показывает, какие файлы шрифтов действительно запрашиваются при загрузке страницы. Включите фильтр Font, очистите кэш и перезагрузите страницу в режиме, имитирующем нужное соединение. Сравните список ресурсов для русской страницы, англоязычной страницы и смешанного текста. Это помогает отличить реальную экономию от случайного результата кэширования.

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

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

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

Unicode-range сообщает браузеру, для каких символов предназначен конкретный файл шрифта. Благодаря этому браузер может не запрашивать ресурс, если его диапазон не пересекается с текстом страницы. Дескриптор не уменьшает файл сам по себе: для экономии нужны заранее подготовленные подмножества.

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

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

Несколько файлов могут понадобиться из-за смешения письменностей, разных font-weight или font-style, а также из-за специальных символов, которых нет в основном подмножестве. Дополнительный запрос также возможен для динамически добавленного текста. Проверяйте фактические символы и вычисленные стили элемента, а не только визуальное содержимое первого экрана.

Сам unicode-range определяет выбор ресурса, но не задаёт поведение текста во время ожидания. За это отвечает font-display и сочетание резервных шрифтов. Чтобы избежать невидимого текста и заметных скачков макета, тестируйте загрузку на медленном соединении и сравнивайте метрики резервной и основной гарнитур.

Признаки ошибки — отдельные буквы или знаки отображаются другой гарнитурой, меняется ширина строк, появляются неожиданные переносы или нужный файл не виден в Network. Для проверки используйте реальные тексты сайта, включая кавычки, тире, числа, валюты, названия брендов и содержимое форм. После исправлений повторите тест с очищенным кэшем.

Unicode-range — инструмент адресной загрузки веб-шрифтов: он помогает браузеру пропускать ненужные файлы, когда шрифт заранее разделён на корректные подмножества. Лучший результат даёт связка из точных диапазонов, WOFF2, разумного font-display, умеренного preload и проверки реальных страниц в DevTools. Если вы создаёте собственную гарнитуру, подготовьте её под нужные языки и сценарии на fontgenerator.ru.