Den unicode-rangeegenskap i CSS brukes ved @font-faceå definere de tegn som bæres av den skrifttype.
@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 andre ord @font-facevil henvise til egenskapen og avgjøre om den skal lastes ned og bruke skriften basert på om tegnene eller tegnområdet samsvarer med de i HTML-dokumentet.
Font Face: Hei HTML, samsvarer noen av følgende tegn med det som er på siden?
HTML: Jepp, en haug med dem gjør det.
Font-Face: Flott, her er en fontfil du bør laste ned for å vise disse tegnene.
Det viktige semantiske skillet vi bør kalle ut her, er som unicode-rangebestemmer hvilke tegn en skrift kan brukes til, i stedet for hvilke tegn en skrift er tilgjengelig for bruk. Med andre ord, hvis vi erklærer en unicode-rangepå @font-faceog tegnene som er lastet inn i et HTML-dokument samsvarer med det området, vil skriften lastes ned og tas i bruk.
Du kan forestille deg ytelsesfordelene som åpnes for denne eiendommen. For eksempel kan vi bare laste inn en egendefinert font hvis den har plass til bestemte tegn i stedet for alltid å laste inn fonten i alle situasjoner.
Det er enda en måte å kombinere to @font-facesett på på samme font-faceeiendomserklæring, takket være et praktisk triks delt av Jake Archibald. Tanken er at det ene @font-facesettet overstyrer det andre basert på matchet unicode-range, optimaliserende ytelse, eller bare forbedrer typografien på en side.
Verdier
Enhver kode eller rekkevidde for unicode er en akseptabel unicode-rangeverdi. Du vil legge merke til at unicode-poeng blir innledet av en U+etterfulgt av opptil seks tegn som utgjør tegnkoden. Poeng eller områder som ikke følger dette formatet, anses som ugyldige og vil føre til at eiendommen ignoreres.
- Enkelt tegn (f.eks.
U+26) - Tegnrekkevidde (f.eks.
U+0025-00FF) - Wildcard Range (f.eks.
U+4??)
Wildcard Range er den vanskelige av gjengen. Hver ?representerer et jokertegn der en hvilken som helst verdi vil matche. Du tror det betyr at du kan jokertegn hele greia med noe sånt som dette:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Dette vil imidlertid ikke fungere. Årsaken er at å lede med ?innebærer en tegnkode som fører med 0, noe som betyr at opptil fem spørsmålstegn kan brukes til tross for at unicodes godtar opptil seks tegn 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 er massevis av unicode-alternativer der ute. Basic Latin ( 0020-007F) er sannsynligvis det vanligste området for engelske nettsteder, men unicode-table.com gir en omfattende liste over alle tilgjengelige områder med koder for bestemte tegn.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Videre lesning
- CSS Fonts Modul Nivå 3 Spesifikasjon
- Unicode-tabell: En ressurs som refererer til unicode-tegnsett og koder.
- Bruke @ font-face: CSS-Tricks-innlegg som dekker hvordan
@font-facefungerer med forskjellige teknikker og arbeidseksempler. - Hva er greia med å erklære fontegenskaper på @ font-face ?: CSS-Tricks-innlegg som er relatert så langt som matchede verdier i fontegenskaper kan brukes til å bestemme om en tilpasset font lastes ned og brukes av nettleseren.