Den unicode-rangeegendom i CSS används av @font-faceatt definiera de tecken som stöds av typsnittet.
@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 */ )Med andra ord, @font-facekommer att hänvisa till egenskapen och avgöra om den ska ladda ner och använda teckensnittet baserat på om tecknen eller teckenintervallet matchar dem i HTML-dokumentet.
Font Face: Hej HTML, matchar något av följande tecken det som finns på sidan?
HTML: Japp, en massa av dem gör det.
Font-Face: Bra, här är en teckensnittsfil du ska ladda ner för att visa dessa tecken.
Den viktiga semantiska skillnaden vi bör kalla här är att unicode-rangeavgör vilka tecken ett teckensnitt kan användas till, snarare än vilka tecken ett teckensnitt är tillgängligt att använda. Med andra ord, om vi deklarerar en unicode-rangepå @font-faceoch tecknen som har laddats i ett HTML-dokument matchar det intervallet, kommer teckensnittet att laddas ner och tas i bruk.
Du kan föreställa dig de prestandafördelar som öppnas med den här egenskapen. Till exempel kan vi bara ladda ett anpassat teckensnitt om det rymmer specifika tecken istället för att alltid ladda teckensnittet i alla situationer.
Det finns till och med ett sätt att kombinera två @font-faceuppsättningar på samma font-facefastighetsdeklaration tack vare ett praktiskt trick som delas av Jake Archibald. Tanken är att en @font-faceuppsättning åsidosätter den andra baserat på matchad unicode-range, optimerande prestanda eller helt enkelt att förbättra typografin på en sida.
Värden
Alla unicode-teckenkoder eller intervall är ett acceptabelt unicode-rangevärde. Du kommer att märka att unicode-punkter föregås av en U+följt av upp till sex tecken som utgör teckenkoden. Poäng eller intervall som inte följer detta format anses vara ogiltiga och kommer att leda till att egenskapen ignoreras.
- Enstaka tecken (t.ex.
U+26) - Teckenintervall (t.ex.
U+0025-00FF) - Wildcard Range (t.ex.
U+4??)
Wildcard Range är det knepiga i gänget. Var och en ?representerar ett jokertecken där något värde kommer att matcha. Du skulle tro att det betyder att du kan jokertecken hela saken med något så här:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Detta kommer dock inte att fungera. Anledningen är att att leda med ?innebär en teckenkod som leder med 0, vilket innebär att upp till fem frågetecken kan användas trots att unicodes accepterar upp till sex tecken totalt.
@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????? */ )Det finns massor av unicode-alternativ där ute. Basic Latin ( 0020-007F) är förmodligen det vanligaste intervallet för engelska webbplatser, men unicode-table.com ger en omfattande lista över alla tillgängliga intervall med koder för specifika tecken.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Vidare läsning
- CSS-typsnitt Modul Nivå 3 Specifikation
- Unicode-tabell: En resurs som refererar till unicode-teckenuppsättningar och -koder.
- Använda @ font-face: CSS-Tricks-inlägg som täcker hur det
@font-facefungerar med olika tekniker och arbetsexempel. - Vad handlar det om att deklarera teckensnittsegenskaper på @ font-face ?: CSS-Tricks-inlägg som är relaterat till hur matchade värden i teckensnittsegenskaper kan användas för att avgöra om ett anpassat teckensnitt laddas ner och används av webbläsaren.