Den unicode-rangeejendom i CSS bruges af @font-faceat definere de tegn, der understøttes af 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 ejendommen og afgøre, om den skal downloade og bruge skrifttypen baseret på, om tegnene eller tegnintervallet matcher dem i HTML-dokumentet.
Font ansigt: Hej HTML, matcher et af følgende tegn det, der er på siden?
HTML: Ja, det gør en flok af dem.
Font-Face: Fantastisk, her er en fontfil, du skal downloade for at vise disse tegn.
Den vigtige semantiske skelnen, vi skal kalde her, er, der unicode-rangebestemmer hvilke tegn en skrifttype kan bruges til, snarere end hvilke tegn en skrifttype er tilgængelig til at bruge. Med andre ord, hvis vi erklærer en unicode-rangetil, @font-faceog de tegn, der er indlæst i et HTML-dokument, matcher det område, så downloades skrifttypen og bruges.
Du kan forestille dig de ydelsesfordele, der åbnes med denne ejendom. For eksempel kan vi kun indlæse en brugerdefineret skrifttype, hvis den rummer bestemte tegn i stedet for altid at indlæse skrifttypen i alle situationer.
Der er endda en måde at kombinere to @font-facesæt på den samme font-faceejendomserklæring takket være et praktisk trick, der deles af Jake Archibald. Ideen er, at det ene @font-facesæt tilsidesætter det andet baseret på den matchede unicode-range, optimerende ydeevne eller blot forbedring af typografien på en side.
Værdier
Enhver unicode-tegnkode eller rækkevidde er en acceptabel unicode-rangeværdi. Du vil bemærke, at unicode-punkter forud for en U+efterfulgt af op til seks tegn, der udgør tegnkoden. Punkter eller områder, der ikke følger dette format, betragtes som ugyldige og får ejendommen til at blive ignoreret.
- Enkelt tegn (f.eks.
U+26) - Tegnområde (f.eks.
U+0025-00FF) - Wildcard Range (f.eks.
U+4??)
Wildcard Range er den vanskelige af bunken. Hver ?repræsenterer et jokertegn, hvor enhver værdi vil matche. Du tror, det betyder, at du kan jokertegne det hele med noget 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 fungerer dog ikke. Årsagen er, at førende med ?indebærer en tegnkode, der fører med 0, hvilket betyder, at op til fem spørgsmålstegn kan bruges på trods af unicodes, der accepterer op til seks tegn i alt.
@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????? */ )Der er masser af unicode-muligheder derude. Grundlæggende latin ( 0020-007F) er sandsynligvis det mest almindelige område for engelske websteder, men unicode-table.com giver en omfattende liste over alle tilgængelige intervaller med koder til bestemte tegn.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Yderligere læsning
- CSS-skrifttyper Modul niveau 3 Specifikation
- Unicode-tabel: En ressource, der henviser til unicode-tegnsæt og koder.
- Brug af @ font-face: CSS-Tricks-indlæg, der dækker hvordan
@font-facefungerer med forskellige teknikker og arbejdseksempler. - Hvad er handlen med at erklære skrifttypeegenskaber på @ font-face ?: CSS-Tricks-indlæg, der er relateret så vidt matchede værdier i fontegenskaber kan bruges til at bestemme, om en brugerdefineret skrifttype downloades og bruges af browseren.