Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

unicode-range

Свойство CSS unicode-range указывает интервалы (диапазоны) символов в формате Юникода (Unicode), которые используются в подключаемом шрифте. Эти данные могут помочь браузерам в принятии решения о загрузке файла со шрифтом.

Но это еще не все. Как известно, каждый шрифт отображает тот или иной символ по своему, что и определяет его гарнитуру. С помощью unicode-range можно создать шрифт, который будет скомпонован из символьного набора нескольких исходных шрифтов. Например, буквы латинского алфавита будут отображаться в стиле шрифта Arial, а кириллические в стиле Courier и т.д. Это достигается путем указания нескольких At-правил @font-face с одинаковым значением свойства font-family.

Тип свойства

Назначение: шрифты.

Применяется: внутри правила @font-face.

Значения

Значением свойства unicode-range являются интервалы символов в формате Юникода, которые указываются в шестнадцатеричных значениях с префиксом «U+». Можно задать несколько интервалов, разделив их запятой, причем они могут местами перекрывать друг друга, но все они должны быть в пределах от 0 до 10FFFF включительно.

  • Значение — указывается один конкретный символ, например U+A69F. Также можно заменить некоторые шестнадцатеричные числа знаком вопроса (?), который означает «любое допустимое число», например U+A???, тогда уже получится определенный диапазон. Причем, если знак вопроса идет в значении первым, то это будет означать, что перед ним имеется цифра ноль (0), например следующие интервалы являются эквивалентными: U+??? = U+0??? = U+0000-0FFF.
  • Интервал — указывается два значения, между которыми ставится дефис, но «U+» пишется только перед первым значением, например U+2DE0-2DFF. Здесь тоже можно использовать знак вопроса, допустим U+2D??-2???.

Процентная запись: не существует.

Значение по умолчанию: U+0-10FFFF.

Синтаксис

unicode-range: значение | интервал [, значение | интервал]*

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство unicode-range</title>
  <style type="text/css">
   @font-face {
    font-family: MyFont; /* имя шрифта */
    src: url('files/dsnote.ttf') format("truetype"); /* загрузить шрифт с сайта */
    unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F; /* интервалы кириллицы */
   }
   @font-face {
    font-family: MyFont; /* имя шрифта */
    src: local('Arial'); /* искать гарнитуру на машине пользователя */
    unicode-range: U+0000-007F; /* интервал символов ASCII, куда входит латиница */
   }
   body {
    font: bold 150% MyFont; /* стили шрифта для страницы */
   }
  </style>
 </head>
 <body>
  <p>Text Text Text</p>
  <p>Текст Текст Текст</p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS unicode-range.

Использование свойства CSS unicode-range

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаНетНетДа
CSS по алфавиту
CSS по назначению