Что такое unicode-range

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

§Синтаксис

unicode-range: U+0400;               /* single codepoint */
unicode-range: U+0400-04FF           /* codepoint range */
unicode-range: U+4??                 /* wildcard range */
unicode-range: U+0400-04FF, U+4??;   /* multiple values can be separated by commas */

Single codepoint — одиночный символ юникода U+0400;
Codepoint range — включает символы из указанного диапазона, например U+0400-04FF;
Wildcard range — включает символы из всего диапазона. Например U+4?? автоматически включит все символы из диапазона U+0400-04FF.
Допустимо использовать все значения через запятую.

§Пример

С помощью unicode-range и нескольких правил @font-face можно скомпоновать из нескольких шрифтов один.

@font-face{
	font-family: 'WebFont';          /* определили название шрифта */
	src: local('Arial Black');       /* указываем нужный шрифт */
	unicode-range: U+0030-0039;      /* указываем диапазон символов, только цифры */
}

@font-face{
	font-family: 'WebFont';
	src: local('Georgia');
	unicode-range: U+0410-044F;      /* диапазон кириллицы */
}

div{
	font-family: 'WebFont';
}

Встретив текст с font-family: 'WebFont', браузер отобразит все цифры шрифтом Arial Black, а кириллический текст шрифтом Georgia. Этот прием можно использовать и для подключаемых шрифтов.

@font-face{
	font-family: 'WebFont';               
	src: url(webfont.woff2) format('woff2');
	unicode-range: U+0030-0039;
}

@font-face{
	font-family: 'WebFont';
	src: local('Georgia');
	unicode-range: U+0410-044F;     
}

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

@font-face {
	font-family: 'Ampersand';
	src: url('playfairdisplayscblack.woff2') format('woff2');
	unicode-range: U+26;
}

h1{
	font-family: 'Ampersand', Arial, sans-serif;
}

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

Еще одним важным преимуществом unciode-range является возможность управлять загрузкой шрифтов на странице. Например, у вас есть мультиязычный сайт с нестандартными шрифтами, и они должны работать для каждого языка. Самое простое решение — добавить символы всех языков в один файл. Однако это сильно увеличит вес шрифта, а если на сайте используется несколько начертаний, то общий объем шрифтовых файлов может вырасти до неприличного. Решить эту проблему можно динамическим подключением css-файлов с font-face для каждого языка, либо использовать один файл стилей и unicode-range.

/* cyrillic */
@font-face {
	font-family: 'Open Sans';
	src: url(opensans-cyr.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
	font-family: 'Open Sans';
	src: url(opensans-greek.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0370-03FF;
}

/* latin-ext */
@font-face {
	font-family: 'Open Sans';
	src: url(opensans-lat-ext.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, 
U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Open Sans';
	src: url(opensans-latin.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F,
 U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

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

§Поддержка

На данный момент unicode-range поддерживается всеми браузерами на webkit, IE >= 9. В Firefox свойство доступно только по флагу и в ближайших версиях ничего пока не изменится.

§Ссылки по теме

Спецификация
Таблица символов юникода