CSS unicode-range: использование и примеры

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

Браузер использует этот диапазон как подсказку для загрузки. Если на странице нет ни одного символа из диапазона, файл шрифта не загружается вовсе. Если хотя бы один символ из диапазона присутствует на странице, загружается весь файл шрифта. Это делает unicode-range основой разбиения шрифта на подмножества — с отдельным небольшим файлом для каждого скрипта (латиница, кириллица, греческий и т. д.) и загрузкой только тех, что реально нужны странице. Если @font-face не поддерживается, вместо него используются резервные шрифты из списка font-family.

Внимание

Кодовые точки Unicode предваряются символами U+ и состоят не более чем из шести символов кода. Точки или диапазоны, не соответствующие этому формату, считаются недопустимыми и приводят к игнорированию свойства.

Существует множество блоков Unicode на выбор. Базовая латиница (U+0020-007F) охватывает стандартные английские буквы, цифры и знаки пунктуации и является наиболее распространённым диапазоном для сайтов на английском языке.

Начальное значение	U+0-10FFFF
Применяется к	Блок @font-face, в который включён дескриптор.
Наследуется	Да.
Анимируется	Нет.
Версия	CSS3
DOM Syntax	object.style.unicodeRange = "U+0025-00FF";

Синтаксис

Значения дескриптора CSS unicode-range

unicode-range: single codepoint | codepoint range | wildcard range | initial | inherit;

Пример дескриптора unicode-range:

Пример кода дескриптора CSS unicode-range

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'MyFont'; /* Define the custom font name */
        src: url('myfont.woff2') format('woff2'), 
             url('myfont.woff') format('woff'); /* Define the font source */
        unicode-range: U+00-FF; /* Define the available characters */
      }
      div {
        font-size: 3em;
        font-family: MyFont, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-range descriptor example</h2>
    <div>Mary & Jack are friends.</div>
  </body>
</html>

Попробуйте сами »

Несколько правил @font-face для разбиения шрифта на подмножества

Основной сценарий использования unicode-range — разбиение шрифта на подмножества для уменьшения объёма загружаемых данных. Каждое подмножество задаёт определённый диапазон символов:

@font-face {
  font-family: 'MyFont';
  src: url('myfont-latin.woff2') format('woff2');
  unicode-range: U+00-FF; /* Basic Latin */
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF; /* Cyrillic */
}

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

Диапазоны с символом подстановки

Символ подстановки ? заменяет любую одну шестнадцатеричную цифру — это компактный способ описать целый блок. Следующие три объявления эквивалентны:

unicode-range: U+0000-00FF; /* explicit range */
unicode-range: U+00??;      /* wildcard: U+0000 to U+00FF */
unicode-range: U+0-FF;      /* leading zeros are optional */

Также можно перечислить несколько диапазонов через запятую:

/* Basic Latin + Latin-1 Supplement + the euro sign */
unicode-range: U+0000-00FF, U+0131, U+20AC;

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

unicode-range поддерживается во всех современных браузерах (Chrome, Firefox, Safari и Edge). Поскольку дескриптор влияет только на выбор загружаемого файла шрифта, браузеры, не поддерживающие его, просто загружают шрифт как обычно — поэтому он деградирует корректно и безопасен для использования повсеместно.

Значения

Значение	Описание
single codepoint	Кодовая точка Unicode, записанная в виде от одной до шести шестнадцатеричных цифр.
codepoint range	Диапазон кодовых точек Unicode, записанный в виде двух кодовых точек, разделённых дефисом. Задаёт начало и конец диапазона.
wildcard range	Диапазон кодовых точек Unicode с символами подстановки: символ `?` обозначает любую шестнадцатеричную цифру (например, `U+00??`).
initial	Устанавливает свойство в его значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Дескриптор CSS unicode-range задаёт конкретный диапазон символов, используемых из шрифта, объявленного с помощью

@font-family@font-face@font-weight