unicode-rangeVara CSS kasutab @font-facemääratleda sümboleid, mis toetab font face.
@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 */ )Teisisõnu, @font-faceviitab atribuudile ja otsustab, kas see peaks fondi alla laadima ja seda kasutama, lähtudes sellest, kas tähemärgid või tähemärkide vahemik vastavad HTML-dokumendis sisalduvatele.
Fondi nägu: Hei HTML, kas mõni järgmistest tähemärkidest vastab lehel olevale?
HTML: jah, paljud neist seda teevad.
Font-Face: Suurepärane, siin on fondifail, mille peaksite nende märkide kuvamiseks alla laadima.
Oluline semantiline eristamine, mida peaksime siin välja kutsuma, on see, mis unicode-rangemäärab, milliste tähemärkide jaoks fonti saab kasutada, mitte selle jaoks, milliste tähemärkide jaoks on fondi kasutada. Teisisõnu, kui me tunnistada unicode-rangekohta @font-faceja tähed, mis on laaditud HTML dokumendi vaste selles vahemikus, siis font alla laadida ja kasutusele võtta.
Võite ette kujutada jõudlust, mis selle omadusega avaneb. Näiteks saame kohandatud fondi laadida ainult siis, kui see mahutab konkreetseid märke, selle asemel, et alati fonti igas olukorras laadida.
Tänu Jake Archibaldi jagatud käepärasele trikile @font-faceon samal font-facekinnisvaradeklaratsioonil isegi kaks komplekti kombineerida . Idee on selles, et üks @font-facekomplekt alistab teise sobitatud unicode-range, optimeeriva jõudluse või lihtsalt lehe tüpograafia täiustamise põhjal.
Väärtused
Mis tahes unicode'i märgikood või vahemik on vastuvõetav unicode-rangeväärtus. Märkate, et unicode-punktidele eelneb U+kuni kuus märki, mis moodustavad märgikoodi. Punkte või vahemikke, mis seda vormingut ei järgi, loetakse kehtetuks ja see ignoreerib vara.
- Üks märk (nt
U+26) - Tähemärk (nt
U+0025-00FF) - Metsamärkide vahemik (nt
U+4??)
Wildcard Range on keeruline kamp. Igaüks ?tähistab metamärke, kuhu sobib mis tahes väärtus. Võib arvata, et see tähendab, et saate kogu asja metamärgistada umbes järgmiselt:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )See aga ei toimi. Põhjuseks on see, et juhtimine ?tähendab tähemärgikoodi, mis viib tähega 0, mis tähendab, et hoolimata sellest, et unicode aktsepteerib kuni kuut tähemärki, saab kasutada kuni viit küsimärki.
@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????? */ )Seal on palju unicode'i võimalusi. Ladina keel ( 0020-007F) on ilmselt kõige levinum vahemik ingliskeelsete saitide jaoks, kuid unicode-table.com pakub põhjalikku loendit kõigist saadaolevatest vahemikest koos konkreetsete märkide koodidega.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Lisalugemist
- CSS-fondide mooduli 3. taseme spetsifikatsioon
- Unicode'i tabel: ressurss, mis viitab unicode'i märkide komplektidele ja koodidele.
- Kasutades @ font-face: CSS-Tricksi postitust, mis käsitleb
@font-facetoimimist erinevate tehnikate ja toimivate näidetega. - Mis probleem on fondiomaduste deklareerimisega @ font-face ?: CSS-Tricks postitus, mis on seotud niipalju, kui fondi omaduste vastavaid väärtusi saab kasutada, et teha kindlaks, kas brauser kohandatud fondi alla laadib ja kasutab.