В 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 документа.
Шрифтово лице: Хей HTML, отговаря ли някой от следните символи на това на страницата?
HTML: Да, куп от тях го правят.
Font-Face: Чудесно, ето файл на шрифта, който трябва да изтеглите, за да покажете тези знаци.
Важното семантично разграничение, което трябва да извикаме тук, е, че unicode-rangeопределя за какви символи може да се използва шрифт, а не за това кои знаци е наличен шрифт. С други думи, ако декларираме unicode-rangeвключено @font-faceи символите, които са се заредили в HTML документ, съвпадат с този диапазон, тогава шрифтът ще се изтегли и ще бъде използван.
Можете да си представите предимствата на производителността, които се откриват с това свойство. Например, можем да заредим персонализиран шрифт само ако той побира конкретни символи, вместо винаги да зареждаме шрифта във всички ситуации.
Има дори начин да комбинирате два @font-faceкомплекта на една и съща font-faceдекларация за собственост, благодарение на удобен трик, споделен от Джейк Арчибалд. Идеята е, че единият @font-faceнабор отменя другия въз основа на съответстващото unicode-range, оптимизиращо изпълнение или просто подобряване на типографията на страница.
Стойности
Всеки код или диапазон от символи на Unicode е приемлива 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, което означава, че могат да се използват до пет знака с въпросителни знаци, въпреки че 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 там. Basic Latin ( 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 Fonts Level 3
- Таблица Unicode: Ресурс за препратка към набори от символи и кодове на unicode
- Използване на @ font-face: CSS-Tricks публикация, обхващаща как
@font-faceработи с различни техники и работни примери. - Каква е работата с декларирането на свойствата на шрифта в @ font-face ?: CSS-Tricks публикация, която е свързана до това как съвпадащите стойности в свойствата на шрифта могат да бъдат използвани, за да се определи дали потребителският шрифт се изтегля и използва от браузъра.