Дескриптор CSS-правила `unicode-range`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с сентября 2016 года.

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

Синтаксис

/* <unicode-range> values */
unicode-range: U+26; /* single code point */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* code point range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */

Значения

одна кодовая точка: Одна кодовая точка Unicode, например U+26.
диапазон кодовых точек: Диапазон кодовых точек Unicode. Например, U+0025-00FF означает включить все символы в диапазоне от U+0025 до U+00FF.
диапазон с подстановочными символами: Диапазон кодовых точек Unicode с подстановочными символами, то есть использующий символ '?'. Например, U+4?? означает включить все символы в диапазоне от U+400 до U+4FF.

Описание

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

Формальное определение

Формальный синтаксис

Примеры

Использование другого шрифта для одного символа

В этом примере мы создадим один элемент <div> с текстовой строкой, содержащей амперсанд, который мы хотим оформить другим шрифтом. Для наглядности мы используем для текста шрифт без засечек Helvetica, а для амперсанда — шрифт с засечками Times New Roman.

В CSS мы фактически определяем совершенно отдельное правило @font-face, содержащее только один символ, то есть только этот символ будет отображаться этим шрифтом. Мы могли бы также обернуть амперсанд в элемент <span> и применить другой шрифт только к нему, но для этого понадобился бы дополнительный элемент и набор правил.

HTML

<div>Me & You = Us</div>

CSS

@font-face {
  font-family: "Ampersand";
  src: local("Times New Roman");
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: "Ampersand", "Helvetica", sans-serif;
}

Результат

Спецификации

Спецификация
CSS Fonts Module Level 4 # unicode-range-desc

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`unicode-range`	1	12	36	15	3.1	18	36	14	3	1.0	4.4	3

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/unicode-range