unicode-rangeNemovitost v CSS je používán @font-facedefinovat znaky, které jsou podporovány 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 */ )Jinými slovy @font-facebude odkazovat na vlastnost a určí, zda by měla nebo neměla stahovat a používat písmo na základě toho, zda znaky nebo rozsah znaků odpovídají těm v dokumentu HTML.
Tvář písma: Ahoj HTML, odpovídá některý z následujících znaků tomu, co je na stránce?
HTML: Ano, spousta z nich ano.
Font-Face: Skvělé, tady je soubor písem, který byste si měli stáhnout, abyste tyto znaky zobrazili.
Důležité sémantické rozlišení, které bychom zde měli vyvolat, je, že unicode-rangeurčuje, pro jaké znaky lze písmo použít, spíše než pro jaké znaky je písmo k dispozici. Jinými slovy, pokud deklarujeme unicode-rangeon @font-facea znaky, které byly načteny v dokumentu HTML, odpovídají tomuto rozsahu, písmo se stáhne a použije.
Můžete si představit výhody výkonu, které se s touto vlastností otevírají. Například můžeme načíst vlastní písmo pouze v případě, že se přizpůsobí konkrétním znakům, a ne vždy načíst písmo ve všech situacích.
Existuje dokonce způsob, jak kombinovat dvě @font-facesady na stejné font-facedeklaraci vlastnosti, a to díky šikovnému triku, který sdílí Jake Archibald. Myšlenka je, že jedna @font-facesada přepíše druhou na základě shody unicode-range, optimalizace výkonu nebo jednoduše vylepšení typografie na stránce.
Hodnoty
Jakýkoli znakový kód nebo rozsah unicode je přijatelná unicode-rangehodnota. Všimnete si, že před body unicode U+následuje až šest znaků, které tvoří kód znaků. Body nebo rozsahy, které tento formát nedodržují, jsou považovány za neplatné a způsobí, že vlastnost bude ignorována.
- Jeden znak (např.
U+26) - Rozsah znaků (např.
U+0025-00FF) - Rozsah zástupných znaků (např.
U+4??)
Rozsah zástupných znaků je složitý z řady. Každý ?představuje zástupný znak, kde bude odpovídat libovolná hodnota. Myslíte si, že to znamená, že můžete celou věc zástupně označit takto:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )To však nebude fungovat. Důvodem je to, že Leading with ?implikuje znakový kód, který vede s 0, což znamená, že lze použít až pět znaků otazníku, přestože unicodes přijímá až šest znaků celkem.
@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 spousta možností unicode. Základní latinka ( 0020-007F) je pravděpodobně nejběžnějším rozsahem pro anglické stránky, ale unicode-table.com poskytuje komplexní seznam všech dostupných rozsahů s kódy pro konkrétní znaky.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Další čtení
- Specifikace modulu CSS Fonts úrovně 3
- Tabulka Unicode: Prostředek odkazující na znakové sady a kódy unicode.
- Používání příspěvku @ font-face: CSS-Tricks o tom, jak
@font-facepracuje s různými technikami a příklady práce. - Jaký je problém s deklarováním vlastností písma na @ font-face ?: Příspěvek CSS-Tricks, který souvisí, pokud jde o to, jak lze pomocí shodných hodnot ve vlastnostech písma určit, zda je vlastní font stažen a používán prohlížečem.