unicode-rangeСвойство в CSS используется @font-faceдля определения символов, которые поддерживаются шрифтом лица.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+00-FF; /* Define the available characters */ )Другими словами, @font-faceбудет обращаться к свойству и определять, следует ли ему загружать и использовать шрифт в зависимости от того, соответствуют ли символы или диапазон символов тем, что в документе HTML.
Font Face: Привет, HTML, соответствует ли какой-либо из следующих символов тому, что находится на странице?
HTML: Да, многие из них.
Font-Face: Отлично, вот файл шрифта, который вы должны загрузить, чтобы отображать эти символы.
Важное семантическое различие, которое мы должны здесь отметить, заключается в том, что оно unicode-rangeопределяет, для каких символов можно использовать шрифт, а не для каких символов шрифт доступен. Другими словами, если мы объявляем unicode-rangeon @font-faceи символы, которые загружены в HTML-документ, соответствуют этому диапазону, тогда шрифт будет загружен и будет использован.
Вы можете себе представить преимущества производительности, которые открывает это свойство. Например, мы можем загрузить собственный шрифт только в том случае, если он содержит определенные символы, а не всегда загружать шрифт во всех ситуациях.
Есть даже способ объединить два @font-faceнабора в одном font-faceобъявлении свойства, благодаря удобному трюку, который поделился Джейк Арчибальд. Идея состоит в том, что один @font-faceнабор переопределяет другой, основываясь на сопоставлении unicode-range, оптимизации производительности или просто улучшении типографики на странице.
Значения
Допустимым unicode-rangeзначением является любой код или диапазон символов Юникода . Вы заметите, что точкам Unicode предшествует U+символ, за которым следует до шести символов, которые составляют код символа. Точки или диапазоны, которые не соответствуют этому формату, считаются недопустимыми и приводят к игнорированию свойства.
- Один символ (например
U+26) - Диапазон символов (например
U+0025-00FF) - Диапазон подстановочных знаков (например
U+4??)
Диапазон подстановочных знаков - самый сложный из множества. Каждый ?представляет собой подстановочный знак, которому будет соответствовать любое значение. Вы могли подумать, что это означает, что вы можете использовать подстановку для всего этого примерно так:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Однако это не сработает. Причина в том, что начало с ?подразумевает код символа, который начинается с 0, что означает, что можно использовать до пяти знаков вопроса, несмотря на то, что юникоды могут принимать до шести символов.
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )Есть масса вариантов Unicode. Базовая латиница ( 0020-007F), вероятно, является наиболее распространенным диапазоном для английских сайтов, но unicode-table.com предоставляет исчерпывающий список всех доступных диапазонов с кодами для определенных символов.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 10,0-10,2 |
Дальнейшее чтение
- Спецификация CSS Fonts Module Level 3
- Таблица Unicode: ресурс для ссылки на наборы символов и коды Unicode.
- Использование @ font-face: публикация CSS-Tricks, в которой рассказывается, как
@font-faceработают разные техники и рабочие примеры. - Как обстоят дела с объявлением свойств шрифта в @ font-face ?: сообщение CSS-Tricks, связанное с тем, как сопоставленные значения в свойствах шрифта могут использоваться для определения того, загружается ли пользовательский шрифт и используется ли браузером.