Свойство CSS unicode-range

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

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

WARNING

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

Существует множество вариантов использования Unicode. Базовый латинский алфавит (0020—007F) является наиболее распространенным диапазоном для сайтов на английском языке.

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

Синтаксис

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

css

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

Пример использования дескриптора unicode-range:

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

html

<!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>

Try it Yourself »

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

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

css

@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 */
}

Браузер загружает только то подмножество, которое содержит символы, используемые на странице.

Значения

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

Практика

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

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

Свойство CSS unicode-range ​

Синтаксис ​

Пример использования дескриптора unicode-range: ​

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