unicode-rangeNekretnina u CSS se koristi od strane @font-facedefinirati znakove koje podržava lice fonta.
@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 */ )Drugim riječima, @font-faceodnosit će se na svojstvo i utvrditi treba li ga preuzeti i koristiti font na temelju toga podudaraju li se znakovi ili raspon znakova s onima u HTML dokumentu.
Font Face: Hej HTML, odgovara li bilo koji od sljedećih znakova onome što je na stranici?
HTML: Da, gomila njih to zna.
Font-Face: Super, evo datoteke s fontom koju biste trebali preuzeti za prikaz tih znakova.
Važna semantička razlika koju bismo ovdje trebali istaknuti jest ta da se unicode-rangeodređuje za koje se znakove font može koristiti, a ne za znakove kojih je font dostupan. Drugim riječima, ako proglasimo unicode-rangeuključeno @font-facei znakovi koji su se učitali u HTML dokument podudaraju se s tim rasponom, tada će se font preuzeti i staviti u upotrebu.
Možete zamisliti prednosti performansi koje se otvaraju s ovom nekretninom. Na primjer, prilagođeni font možemo učitati samo ako sadrži određene znakove, umjesto da uvijek učitava font u svim situacijama.
Postoji čak i način kombiniranja dva @font-faceseta na istoj font-facedeklaraciji imovine zahvaljujući zgodnom triku koji je podijelio Jake Archibald. Ideja je da jedan @font-faceskup nadjača drugi na temelju podudarnih unicode-range, optimizirajući izvedbu ili jednostavno poboljšavajući tipografiju na stranici.
Vrijednosti
Bilo koji kod ili raspon unicode znakova prihvatljiva je unicode-rangevrijednost. Primijetit ćete da unicode točkama prethodi i U+slijedi do šest znakova koji čine kôd znaka. Točke ili rasponi koji ne slijede ovaj format smatraju se nevaljanima i uzrokovat će zanemarivanje svojstva.
- Jedan znak (npr.
U+26) - Raspon znakova (npr.
U+0025-00FF) - Raspon zamjenskih znakova (npr.
U+4??)
Wildcard Range je vrlo nezgodan. Svaki ?predstavlja zamjenski znak gdje će se podudarati bilo koja vrijednost. Pomislili biste da to znači da cijelu stvar možete zamijeniti nečim sličnim ovome:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Međutim, ovo neće uspjeti. Razlog je taj što vođenje s ?podrazumijeva kôd znaka koji vodi sa 0, što znači da se može koristiti do pet znakova pitanja, unatoč tome što unicodes prihvaćaju do šest ukupnih znakova.
@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????? */ )Postoji mnoštvo unicode opcija. Osnovni latinica ( 0020-007F) vjerojatno je najčešći raspon za engleska web mjesta, ali unicode-table.com pruža sveobuhvatan popis svih dostupnih raspona s kodovima za određene znakove.
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Daljnje čitanje
- Specifikacija modula CSS fontova razine 3
- Unicode tablica: resurs za upućivanje na unicode skupove znakova i kodove.
- Korištenje @ font-face: CSS-Tricks post koji opisuje kako se
@font-faceradi s različitim tehnikama i primjerima rada. - Kakva je stvar s deklarisanjem svojstava fonta na @ font-face ?: CSS-Tricks post koji je povezan koliko se podudarne vrijednosti u svojstvima fonta mogu koristiti za određivanje preuzima li i koristi li prilagođeni font preglednik.