A unicode-rangeCSS tulajdonságot az a használja @font-facea betűkészlet által támogatott karakterek meghatározásához.
@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 */ )Más szavakkal, @font-faceutalni fog a tulajdonságra, és meghatározza, hogy le kell-e töltenie és be kell-e használnia a betűtípust az alapján, hogy a karakterek vagy a karaktertartomány megegyeznek-e a HTML-dokumentumban szereplőekkel.
Betűtípus: Hé, HTML, a következő karakterek egyike megegyezik-e az oldalon szereplővel?
HTML: Igen, egy csomó közülük.
Font-Face: Remek, itt van egy betűtípusfájl, amelyet le kell töltenie a karakterek megjelenítéséhez.
A fontos szemantikai megkülönböztetés, amelyet itt fel kell hívnunk, az unicode-rangehatározza meg, hogy egy betűtípus milyen karakterekre használható, és nem az, hogy milyen betűk használhatók. Más szavakkal, ha deklaráljuk a-t unicode-range, @font-faceés a HTML-dokumentumba betöltött karakterek megegyeznek ezzel a tartományral, akkor a betűtípus letöltésre kerül és használatra kerül.
El tudja képzelni, milyen teljesítményelőnyök nyílnak meg ezzel a tulajdonsággal. Például csak akkor tölthetünk be egyedi betűtípust, ha az adott karaktereket tartalmaz, ahelyett, hogy mindig betöltenék a betűtípust minden helyzetben.
Jake Archibald által megosztott praktikus trükknek köszönhetően még két módszert is össze lehet kapcsolni @font-faceugyanazon font-faceingatlan-nyilatkozaton. Az ötlet az, hogy az egyik @font-facekészlet felülírja a másikat az egyeztetett unicode-range, optimalizáló teljesítmény, vagy egyszerűen az oldal tipográfiájának javítása alapján.
Értékek
Bármely unicode karakterkód vagy tartomány elfogadható unicode-rangeérték. Észre fogja venni, hogy az unicode pontokat megelőzi a U+karakterkódot alkotó legfeljebb hat karakter. Azok a pontok vagy tartományok, amelyek nem követik ezt a formátumot, érvénytelennek minősülnek, és a tulajdonság figyelmen kívül hagyását eredményezik.
- Egy karakter (pl.
U+26) - Karaktertartomány (pl.
U+0025-00FF) - Helyettesítő karakteres tartomány (pl.
U+4??)
A helyettesítő karakterlánc a trükkös. Mindegyik ?helyettesítő karaktert jelent, ahol bármely érték meg fog egyezni. Azt gondolhatja, hogy ez azt jelenti, hogy az egészet helyettesítheti valami ilyesmivel:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Ez azonban nem fog működni. Ennek oka az, hogy a -val ?való vezetés olyan karakter-kódot 0jelent, amely -nel vezet , vagyis legfeljebb öt kérdőjel-karakter használható annak ellenére, hogy az unicode-ok legfeljebb hat karaktert fogadnak el.
@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????? */ )Rengeteg unicode opció létezik. Az alap latin ( 0020-007F) az angol webhelyeknél valószínűleg a legelterjedtebb tartomány, de az unicode-table.com átfogó listát ad az összes rendelkezésre álló tartományról, adott karakterek kódjaival.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 36 | 44. | 11. | 17. | 10. |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.0-10.2 |
További irodalom
- CSS betűtípus modul 3. szintű specifikáció
- Unicode táblázat: Az unicode karakterkészletek és kódok hivatkozására szolgáló erőforrás.
- A @ font-face: CSS-Tricks
@font-facehasználatával különféle technikákkal és működő példákkal foglalkozom. - Mi a helyzet a betűtulajdonságok deklarálásával a @ font-face ?: CSS-Tricks bejegyzésben, amely összefügg azzal, hogy a betűkészlet tulajdonságainak egyező értékei hogyan használhatók annak meghatározására, hogy az egyéni betűtípust letöltötte-e és használja-e a böngésző.