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.
Шрифт Face: Hey HTML, чи відповідає будь-який із наведених символів тому, що є на сторінці?
HTML: Так, купа з них це робить.
Font-Face: Чудово, ось файл шрифтів, який потрібно завантажити для відображення цих символів.
Важливим семантичним розрізненням, яке тут слід назвати, є те, що unicode-rangeвизначає, для яких символів може використовуватися шрифт, а не які символи доступні для використання шрифтом. Іншими словами, якщо ми оголосимо, що unicode-rangeon, @font-faceа символи, завантажені в документ HTML, збігаються з цим діапазоном, тоді шрифт завантажиться і буде застосовано.
Ви можете собі уявити переваги продуктивності, які відкриваються з цією властивістю. Наприклад, ми можемо завантажити спеціальний шрифт лише у тому випадку, якщо він вміщує певні символи, а не завжди завантажує шрифт у всіх ситуаціях.
Існує навіть спосіб поєднати два @font-faceнабори в одній font-faceдекларації про властивості, завдяки зручному трюку, яким поділився Джейк Арчібальд. Ідея полягає в тому, що один @font-faceнабір замінює інший на основі відповідності unicode-range, оптимізації продуктивності або просто покращення типографіки на сторінці.
Цінності
Будь-який код символу або діапазон Unicode є прийнятним unicode-rangeзначенням. Ви помітите, що перед точками юнікоду передують 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, тобто, що може використовувати до п’яти символів знака, незважаючи на те, що Unicodes приймають до шести символів.
@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, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Подальше читання
- Специфікація модуля шрифтів CSS рівня 3
- Таблиця Unicode: ресурс для посилання на набори та коди символів Unicode.
- Використання @ font-face: Пост CSS-Tricks, який розповідає про те, як
@font-faceпрацює з різними техніками та прикладами роботи. - Яка справа з оголошенням властивостей шрифту на @ font-face?: Пост CSS-Tricks, який пов’язаний з тим, наскільки збігаються значення у властивостях шрифту можуть визначати, чи користувальницький шрифт завантажується та використовується браузером.