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

Значения

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

Описание

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

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

Связанное правило	`@font-face`
Начальное значение	`U+0-10FFFF`
Вычисленное значение	как указано

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

unicode-range = 
  <urange>#

Примеры

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

В этом примере мы создаём один элемент <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
`unicode-range`	1	12	36	15	3.1	18	36	14	3	1.0	≤37

См. также

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