unicode-rangeHotel v CSS je z uporablja @font-faceza opredelitev znake, ki jih podpira obraz pisave.
@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 */ )Z drugimi besedami, @font-faceskliceval se bo na lastnost in določil, ali naj prenese in uporablja pisavo glede na to, ali se znaki ali obseg znakov ujemajo z znaki v dokumentu HTML.
Pisava: Hej HTML, ali se kateri od naslednjih znakov ujema s tem, kar je na strani?
HTML: Ja, veliko jih jih ima.
Font-Face: Odlično, tukaj je datoteka pisave, ki jo morate prenesti za prikaz teh znakov.
Pomembno semantično razlikovanje, ki bi ga tukaj morali poklicati, je, da se unicode-rangedoloči, za katere znake se lahko uporablja pisava, in ne za katere znake je pisava na voljo. Z drugimi besedami, če razglasimo, da je unicode-rangevklopljen @font-facein se znaki, naloženi v dokumentu HTML, ujemajo s tem obsegom, se bo pisava prenesla in dala v uporabo.
Lahko si predstavljate koristi od uspešnosti, ki se odpirajo s to lastnostjo. Pisavo po meri lahko na primer naložimo le, če vsebuje določene znake, namesto da bi v vseh primerih vedno naložili pisavo.
Zahvaljujoč priročnemu triku, ki ga je delil Jake Archibald, obstaja celo možnost kombiniranja dveh @font-facesklopov na isti font-faceizjavi o lastnostih. Ideja je, da en @font-faceniz preglasi drugega na podlagi ujemajočega se unicode-range, optimiziranega delovanja ali preprosto izboljšanja tipografije na strani.
Vrednote
Vsaka koda ali obseg znakov Unicode je sprejemljiva unicode-rangevrednost. Opazili boste, da pred točkami unicode U+sledi do šest znakov, ki sestavljajo kodo znakov. Točke ali obsegi, ki ne sledijo tej obliki, se štejejo za neveljavne in bodo povzročili, da bo lastnost prezrta.
- Enotni znak (npr.
U+26) - Obseg znakov (npr.
U+0025-00FF) - Območje nadomestnih znakov (npr.
U+4??)
Wildcard Range je zapleten. Vsak ?predstavlja nadomestni znak, kjer se ujema katera koli vrednost. Mislili bi, da to pomeni, da lahko celotno stvar nadomestite s čim podobnim:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Vendar to ne bo delovalo. Razlog je v tem, da vodenje z ?implicira kodo znakov, ki vodi z 0, kar pomeni, da je mogoče uporabiti do pet znakov vprašanj, kljub temu, da unicode sprejmejo do šest znakov.
@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????? */ )Obstaja ogromno možnosti Unicode. Osnovna latinica ( 0020-007F) je verjetno najpogostejši obseg za angleška spletna mesta, toda unicode-table.com ponuja izčrpen seznam vseh razpoložljivih obsegov s kodami za določene znake.
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 36 | 44 | 11. | 17. | 10. |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Nadaljnje branje
- Specifikacija modula pisav CSS 3. stopnje
- Tabela Unicode: Vir za sklicevanje na nabor znakov in kode Unicode.
- Uporaba @ font-face: CSS-Tricks objava, ki opisuje, kako
@font-facedeluje z različnimi tehnikami in primeri dela. - Kakšen je dogovor z razglasitvijo lastnosti pisave na @ font-face?: Objava CSS-Tricks, ki je povezana s tem, kako lahko z ujemajočimi se vrednostmi v lastnostih pisave določite, ali je brskalnik prenesel in uporabil pisavo po meri.