unicode-rangeĪpašums CSS tiek izmantots ar @font-facedefinēt rakstzīmes, kas tiek atbalstītas ar fonta sejas.
@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 */ )Citiem vārdiem sakot, @font-faceatsauksies uz īpašumu un noteiks, vai tam vajadzētu lejupielādēt un izmantot fontu, pamatojoties uz to, vai rakstzīmes vai rakstzīmju diapazons atbilst HTML dokumentā norādītajiem.
Fonta seja: Hei HTML, vai kāda no šīm rakstzīmēm atbilst tai, kas atrodas lapā?
HTML: Jā, daudzi no viņiem to dara.
Fontu seja: lieliski, šeit ir jāielādē fontu fails, lai parādītu šīs rakstzīmes.
Svarīgais semantiskais nošķīrums, kas mums šeit būtu jāuzsver, ir tas, kas unicode-rangenosaka, kādām rakstzīmēm var izmantot fontu, nevis to, kuras rakstzīmes fonts ir pieejams. Citiem vārdiem sakot, ja mēs paziņojam unicode-rangepar @font-faceieslēgtu un HTML dokumentā ielādētās rakstzīmes atbilst šim diapazonam, fonts tiks lejupielādēts un tiks izmantots.
Jūs varat iedomāties veiktspējas priekšrocības, kuras paver šis īpašums. Piemēram, mēs varam ielādēt pielāgotu fontu tikai tad, ja tajā ievietotas noteiktas rakstzīmes, nevis vienmēr ielādējot fontu visās situācijās.
Pateicoties ērtajam trikam, ko dalīja Džeiks Arčibalds, ir pat veids, @font-facekā vienā un tajā pašā font-faceīpašuma deklarācijā apvienot divus komplektus . Ideja ir tāda, ka viens @font-facekomplekts ignorē otru, pamatojoties uz saskaņoto unicode-range, optimizējošo veiktspēju vai vienkārši uzlabojot tipogrāfiju lapā.
Vērtības
Jebkurš unikoda rakstzīmju kods vai diapazons ir pieņemama unicode-rangevērtība. Jūs ievērosiet, ka pirms unikoda punktiem U+seko līdz sešām rakstzīmēm, kas veido rakstzīmju kodu. Punkti vai diapazoni, kas neatbilst šim formātam, tiek uzskatīti par nederīgiem un to dēļ īpašība tiks ignorēta.
- Viena rakstzīme (piem.
U+26) - Rakstzīmju diapazons (piemēram
U+0025-00FF) - Aizstājējzīmju diapazons (piemēram
U+4??)
Aizstājējzīmju diapazons ir grūts. Katrs ?apzīmē aizstājējzīmi, kur sakritīs jebkura vērtība. Jūs domājat, ka tas nozīmē, ka visu varat aizstāt ar simbolu šādi:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Tomēr tas nedarbosies. Iemesls ir tāds , ka ievadīšana ?ar simbolu nozīmē rakstzīmju kodu, kas ved uz 0priekšu, kas nozīmē, ka var izmantot līdz piecām jautājuma zīmes rakstzīmēm, neskatoties uz to, ka unikodi pieņem ne vairāk kā sešas rakstzīmes.
@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????? */ )Tur ir daudz unikoda opciju. Latin Latin ( 0020-007F), iespējams, ir visizplatītākais diapazons angļu vietnēs, taču unicode-table.com sniedz visaptverošu visu pieejamo diapazonu sarakstu ar kodu īpašām rakstzīmēm.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 36 | 44. | 11 | 17 | 10 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.0-10.2 |
Papildu lasīšana
- CSS fontu moduļa 3. līmeņa specifikācija
- Unikoda tabula: resurss atsauces uz unikoda rakstzīmju kopām un kodiem.
- Izmantojot @ font-face: CSS-Tricks ziņu, kurā aprakstīts, kā
@font-facedarbojas ar dažādām tehnikām, un darba piemēri. - Kāds ir darījums ar fonta rekvizītu deklarēšanu @ font-face ?: CSS-Tricks ziņojumā, kas ir saistīts ar to, kā fonta rekvizītos saskaņotās vērtības var izmantot, lai noteiktu, vai pārlūkprogramma lejupielādē un izmanto pielāgotu fontu.