unicode-rangeNieruchomość w CSS jest używany przez @font-facezdefiniować znaki, które są obsługiwane przez czcionką.
@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 */ )Innymi słowy, @font-facebędzie odnosić się do właściwości i określać, czy powinna pobierać i używać czcionki na podstawie tego, czy znaki lub zakres znaków są zgodne z tymi w dokumencie HTML.
Krój czcionki: Hej, HTML, czy któryś z poniższych znaków pasuje do tego, co jest na stronie?
HTML: Tak, kilka z nich to robi.
Font-Face: Świetnie, oto plik czcionki, który należy pobrać, aby wyświetlić te znaki.
Ważnym rozróżnieniem semantycznym, które powinniśmy tutaj podkreślić, jest to, że unicode-rangeokreśla, do jakich znaków można użyć czcionki, a nie do jakich znaków czcionka jest dostępna. Innymi słowy, jeśli zadeklarujemy unicode-rangeon, @font-facea znaki załadowane w dokumencie HTML pasują do tego zakresu, czcionka zostanie pobrana i zostanie użyta.
Możesz sobie wyobrazić korzyści w zakresie wydajności, które otwierają się dzięki tej właściwości. Na przykład możemy załadować niestandardową czcionkę tylko wtedy, gdy zawiera ona określone znaki, zamiast zawsze ładować czcionkę we wszystkich sytuacjach.
Jest nawet sposób na połączenie dwóch @font-facezestawów na tej samej font-facedeklaracji właściwości, dzięki poręcznej sztuczce udostępnionej przez Jake'a Archibalda. Chodzi o to, że jeden @font-facezestaw zastępuje drugi w oparciu o dopasowaną unicode-range, optymalizującą wydajność lub po prostu ulepszającą typografię na stronie.
Wartości
Dowolny kod lub zakres znaków Unicode jest dopuszczalną unicode-rangewartością. Zauważysz, że punkty Unicode są poprzedzone znakiem U+a, po którym następuje maksymalnie sześć znaków, które składają się na kod znaku. Punkty lub zakresy, które nie są zgodne z tym formatem, są uważane za nieprawidłowe i spowodują zignorowanie właściwości.
- Pojedynczy znak (np.
U+26) - Zakres znaków (np.
U+0025-00FF) - Zakres symboli wieloznacznych (np.
U+4??)
Zakres symboli wieloznacznych jest trudny. Każdy ?reprezentuje symbol wieloznaczny, do którego pasuje dowolna wartość. Można by pomyśleć, że oznacza to, że możesz użyć symbolu wieloznacznego za pomocą czegoś takiego:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Jednak to nie zadziała. Powodem jest to, że początek z ?oznacza kod znaku, który prowadzi do 0, co oznacza, że można użyć maksymalnie pięciu znaków zapytania, mimo że unicodes akceptują maksymalnie sześć znaków.
@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????? */ )Istnieje mnóstwo opcji Unicode. Podstawowa łacina ( 0020-007F) jest prawdopodobnie najpopularniejszym zakresem w witrynach w języku angielskim, ale unicode-table.com zawiera obszerną listę wszystkich dostępnych zakresów z kodami dla określonych znaków.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Dalsze czytanie
- Specyfikacja modułu czcionek CSS poziomu 3
- Tabela Unicode: zasób odwołujący się do zestawów znaków i kodów Unicode.
- Korzystanie z @ font-face: CSS-Tricks post opisujący, jak
@font-facedziała z różnymi technikami i działającymi przykładami. - O co chodzi z deklarowaniem właściwości czcionki w @ font-face ?: Post CSS-Tricks, który jest powiązany ze sposobem wykorzystania dopasowanych wartości we właściwościach czcionki do określenia, czy niestandardowa czcionka jest pobierana i używana przez przeglądarkę.