unicode-rangeNehnuteľnosť v CSS je používaný @font-facedefinovať znaky, ktoré sú podporované fontu.
@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 */ )Inými slovami, @font-facebude odkazovať na vlastnosť a určí, či má alebo nemá sťahovať a používať písmo na základe toho, či sa znaky alebo rozsah znakov zhodujú s znakmi alebo rozsahom znakov v dokumente HTML.
Tvár písma: Ahoj, HTML, zhoduje sa niektorý z nasledujúcich znakov s tým, čo je na stránke?
HTML: Áno, veľa z nich áno.
Font-Face: Skvělé, tu je súbor písma, ktorý by ste si mali stiahnuť, aby ste mohli tieto znaky zobraziť.
Dôležitý sémantický rozdiel, ktorý by sme tu mali vyvolať, je ten, ktorý unicode-rangeurčuje, na aké znaky sa dá písmo použiť, a nie na to, aké znaky má písmo k dispozícii. Inými slovami, ak by sme vyhlásiť unicode-rangena @font-faceao znakoch, ktoré ste vložili v zápase dokumente HTML, ktorý rozsah, potom je písmo stiahne a byť uvedený do prevádzky.
Môžete si predstaviť výkonové výhody, ktoré sa otvárajú s touto vlastnosťou. Napríklad môžeme načítať vlastné písmo, iba ak sa prispôsobí konkrétnym znakom, a nie vždy načítať písmo vo všetkých situáciách.
Existuje dokonca spôsob, ako kombinovať dve @font-facemnožiny na jednej font-facedeklarácii vlastnosti, a to vďaka šikovnému triku, ktorý zdieľal Jake Archibald. Ide o to, že jedna @font-facesada prepíše druhú na základe zhody unicode-range, optimalizácie výkonu alebo jednoduchého vylepšenia typografie na stránke.
Hodnoty
Akýkoľvek znakový kód alebo rozsah unicode je prijateľná unicode-rangehodnota. Všimnete si, že pred bodmi unicode U+nasleduje až šesť znakov, ktoré tvoria kód znaku. Body alebo rozsahy, ktoré nedodržiavajú tento formát, sa považujú za neplatné a spôsobia ignorovanie vlastnosti.
- Jeden znak (napr.
U+26) - Rozsah znakov (napr.
U+0025-00FF) - Rozsah zástupných znakov (napr.
U+4??)
Rozsah zástupných znakov je zložitý z radu. Každý ?predstavuje zástupný znak, v ktorom sa bude zhodovať ľubovoľná hodnota. Mohli by ste si myslieť, že to znamená, že to môžete zástupne označiť takýmto spôsobom:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Toto však nebude fungovať. Dôvod je ten, že predpona s ?znamená kód znaku, ktorý vedie do 0, čo znamená, že je možné použiť až päť znakov otáznika napriek tomu, že unicodes prijíma spolu až šesť 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????? */ )Existuje veľa možností unicode. Základná latinka ( 0020-007F) je pravdepodobne najbežnejším rozsahom pre anglické stránky, ale unicode-table.com poskytuje komplexný zoznam všetkých dostupných rozsahov s kódmi pre konkrétne znaky.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Ďalšie čítanie
- Špecifikácia modulu CSS Fonts úrovne 3
- Tabuľka Unicode: Zdroj na odkazovanie na znakové sady a kódy unicode.
- Používanie príspevku @ font-face: CSS-Tricks, ktorý popisuje, ako
@font-facepracuje s rôznymi technikami a príkladmi práce. - Čo sa deje s deklarovaním vlastností písma na @ font-face ?: Príspevok CSS-Tricks súvisí, pokiaľ ide o to, ako sa dajú použiť zhodné hodnoty vo vlastnostiach písma na určenie, či je prehliadačom stiahnuté a použité vlastné písmo.