unicode-rangeCSS turtas naudojamas @font-faceapibrėžti simbolius, kuriuos palaiko šrifto veidą.
@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 */ )Kitaip tariant, @font-facenurodys nuosavybę ir nustatys, ar ji turėtų atsisiųsti ir naudoti šriftą, atsižvelgdama į tai, ar simboliai ar simbolių diapazonas sutampa su HTML dokumente esančiais.
Šrifto veidas: Ei HTML, ar kuris nors iš šių simbolių atitinka tai, kas yra puslapyje?
HTML: Taip, krūva jų daro.
„Font-Face“: Puiku, štai šrifto failą, kurį turėtumėte atsisiųsti, kad būtų rodomi šie simboliai.
Svarbus semantinis skirtumas, kurį turėtume čia iškviesti, yra tas, kuris unicode-rangenustato, kokiems simboliams galima naudoti šriftą, o ne kokius šriftus galima naudoti. Kitaip tariant, jei mes paskelbti unicode-rangeant @font-faceir simbolių, kurie pakraunami į HTML dokumento rungtynių, kad asortimentas, tada šriftas bus atsisiųsti ir būti naudoti.
Galite įsivaizduoti, kokią naudą suteikia ši nuosavybė. Pavyzdžiui, galime įkelti pasirinktinį šriftą tik tuo atveju, jei jame yra konkretūs simboliai, o ne visada įkeliame šriftą visose situacijose.
Dėl patogaus triuko, kurį pasidalino Jake'as Archibaldas, @font-facetoje pačioje font-faceturto deklaracijoje yra net būdas sujungti du rinkinius . Idėja yra ta, kad vienas @font-facerinkinys nepaiso kito, atsižvelgiant į suderintą unicode-range, optimizuojantį našumą ar paprasčiau pagerinant puslapio tipografiją.
Vertybės
Bet kuris „unicode“ simbolių kodas ar diapazonas yra priimtina unicode-rangereikšmė. Pastebėsite, kad prieš „unicode“ taškus U+seka iki šešių simbolių, sudarančių simbolių kodą. Taškai ar diapazonai, kurie neatitinka šio formato, laikomi negaliojančiais ir dėl to ypatybė bus ignoruojama.
- Vienas simbolis (pvz.
U+26) - Simbolių diapazonas (pvz.
U+0025-00FF) - Pakaitos simbolių diapazonas (pvz.
U+4??)
„Wildcard Range“ yra sudėtinga. Kiekvienas ?simbolis reiškia pakaitos simbolį, kuriame sutaps bet kokia vertė. Jūs manote, kad tai reiškia, kad galite pakeisti simbolį tokiu dalyku:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Tačiau tai neveiks. Priežastis yra ta, kad vedant kartu ?reiškia simbolių kodą, kuris veda kartu 0, vadinasi, galima naudoti iki penkių klaustukų simbolių, nepaisant to, kad unicodes priima iki šešių simbolių.
@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????? */ )Yra daugybė „unicode“ parinkčių. „Latin Latin“ ( 0020-007F) yra turbūt labiausiai paplitęs angliškų svetainių diapazonas, tačiau unicode-table.com pateikia išsamų visų galimų diapazonų sąrašą su konkrečių simbolių kodais.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Papildoma literatūra
- CSS šriftų modulio 3 lygio specifikacija
- „Unicode“ lentelė: šaltinis, nurodantis „unicode“ simbolių rinkinius ir kodus.
- Naudojant „@ font-face: CSS-Tricks“ įrašą, kuriame aprašoma, kaip
@font-faceveikia naudojant skirtingas technikas, ir darbo pavyzdžių. - Koks reikalavimas deklaruoti šrifto ypatybes @ font-face ?: CSS-Tricks įrašas, susijęs su tuo, kaip šrifto ypatybėse suderintos reikšmės gali būti naudojamos norint nustatyti, ar naršyklė atsisiunčia ir naudoja pasirinktinį šriftą.