De unicode-rangeeigenschap in CSS wordt gebruikt door de @font-faceom de tekens te definiëren die worden ondersteund door het lettertype.
@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 */ )Met andere woorden, @font-faceverwijst naar de eigenschap en bepaalt of het lettertype wel of niet moet worden gedownload en gebruikt op basis van het feit of de tekens of het tekenbereik overeenkomen met die in het HTML-document.
Lettertype: Hey HTML, komt een van de volgende tekens overeen met wat er op de pagina staat?
HTML: Ja, een aantal van hen doen dat.
Font-Face: Geweldig, hier is een lettertypebestand dat u moet downloaden om die tekens weer te geven.
Het belangrijke semantische onderscheid dat we hier moeten noemen, is dat het unicode-rangebepaalt voor welke tekens een lettertype kan worden gebruikt, in plaats van voor welke tekens een lettertype beschikbaar is. Met andere woorden, als we een unicode-rangeaan declareren @font-faceen de tekens die in een HTML-document zijn geladen, komen overeen met dat bereik, dan wordt het lettertype gedownload en in gebruik genomen.
U kunt zich de prestatievoordelen voorstellen die deze eigenschap oplevert. We kunnen bijvoorbeeld een aangepast lettertype alleen laden als het specifieke tekens bevat in plaats van het lettertype altijd in alle situaties te laden.
Er is zelfs een manier om twee @font-facesets op dezelfde font-faceeigenschap-declaratie te combineren , dankzij een handige truc die wordt gedeeld door Jake Archibald. Het idee is dat de ene @font-faceset de andere overschrijft op basis van de overeenkomende unicode-range, optimaliserende prestaties of gewoon door de typografie op een pagina te verbeteren.
Waarden
Elke Unicode-tekencode of elk bereik is een acceptabele unicode-rangewaarde. U zult opmerken dat unicode-punten worden voorafgegaan door een U+gevolgd door maximaal zes tekens die de tekencode vormen. Punten of bereiken die dit formaat niet volgen, worden als ongeldig beschouwd en zorgen ervoor dat de eigenschap wordt genegeerd.
- Eén teken (bijv.
U+26) - Tekenbereik (bijv.
U+0025-00FF) - Wildcard-bereik (bijv.
U+4??)
De Wildcard-reeks is de lastige van het stel. Elk ?vertegenwoordigt een jokerteken waar elke waarde overeenkomt. Je zou denken dat je het hele ding met een jokerteken kunt gebruiken met zoiets als dit:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Dit zal echter niet werken. De reden hiervoor is dat voorlopen met ?een tekencode impliceert die voorloopt 0, wat betekent dat er maximaal vijf vraagtekens kunnen worden gebruikt ondanks dat unicodes in totaal maximaal zes tekens accepteren.
@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????? */ )Er zijn een heleboel unicode-opties die er zijn. Basic Latin ( 0020-007F) is waarschijnlijk het meest gebruikte bereik voor Engelse sites, maar unicode-table.com biedt een uitgebreide lijst van alle beschikbare bereiken met codes voor specifieke karakters.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Verder lezen
- CSS Fonts Module Level 3 Specificatie
- Unicode-tabel: een bron om te verwijzen naar unicode-tekensets en codes.
- @ Font-face gebruiken: CSS-Tricks-post over hoe
@font-facewerkt met verschillende technieken en werkvoorbeelden. - Hoe zit het met het declareren van lettertype-eigenschappen op @ font-face ?: CSS-Tricks-bericht dat gerelateerd is aan de manier waarop overeenkomende waarden in lettertype-eigenschappen kunnen worden gebruikt om te bepalen of een aangepast lettertype wordt gedownload en gebruikt door de browser.