La unicode-rangeproprietà in CSS viene utilizzata da @font-faceper definire i caratteri supportati dal tipo di carattere.
@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 */ )In altre parole, @font-facefarà riferimento alla proprietà e determinerà se scaricare e utilizzare il carattere in base al fatto che i caratteri o l'intervallo di caratteri corrispondano a quelli nel documento HTML.
Carattere: Hey HTML, uno dei seguenti caratteri corrisponde a ciò che è sulla pagina?
HTML: Sì, molti di loro lo fanno.
Font-Face: Fantastico, ecco un file di font da scaricare per visualizzare quei caratteri.
L'importante distinzione semantica che dovremmo richiamare qui è che unicode-rangedetermina per quali caratteri un font può essere utilizzato, piuttosto che per quali caratteri è disponibile un font. In altre parole, se si dichiara un unicode-rangesu @font-facee personaggi che si sono caricati in un match documento HTML tale intervallo, quindi il tipo di carattere scaricherà e essere messe a frutto.
Puoi immaginare i vantaggi in termini di prestazioni che si aprono con questa proprietà. Ad esempio, possiamo caricare un carattere personalizzato solo se contiene caratteri specifici anziché caricare sempre il carattere in tutte le situazioni.
C'è anche un modo per combinare due @font-faceset sulla stessa font-facedichiarazione di proprietà, grazie a un pratico trucco condiviso da Jake Archibald. L'idea è che un @font-faceset sostituisca l'altro in base alle unicode-rangeprestazioni abbinate , ottimizzando o semplicemente migliorando la tipografia su una pagina.
Valori
Qualsiasi codice o intervallo di caratteri Unicode è un unicode-rangevalore accettabile . Noterai che i punti Unicode sono preceduti da un U+seguito da un massimo di sei caratteri che compongono il codice carattere. I punti o gli intervalli che non seguono questo formato sono considerati non validi e faranno sì che la proprietà venga ignorata.
- Singolo carattere (es.
U+26) - Gamma di caratteri (es.
U+0025-00FF) - Intervallo caratteri jolly (ad es.
U+4??)
Il Wildcard Range è il più complicato del gruppo. Ognuno ?rappresenta un carattere jolly in cui qualsiasi valore corrisponderà. Penseresti che ciò significhi che puoi jolly l'intera cosa con qualcosa del genere:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Tuttavia, questo non funzionerà. Il motivo è che l'inizio con ?implica un codice carattere che conduce con 0, il che significa che è possibile utilizzare fino a cinque caratteri punto interrogativo nonostante gli unicode accettino fino a sei caratteri totali.
@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????? */ )Ci sono un sacco di opzioni Unicode là fuori. Il latino di base ( 0020-007F) è probabilmente l'intervallo più comune per i siti in inglese, ma unicode-table.com fornisce un elenco completo di tutti gli intervalli disponibili con codici per caratteri specifici.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Ulteriori letture
- Specifica di livello 3 del modulo dei caratteri CSS
- Tabella Unicode: una risorsa per fare riferimento a set di caratteri e codici Unicode.
- Using @ font-face: post CSS-Tricks che spiega come
@font-facefunziona con diverse tecniche ed esempi di lavoro. - Qual è il problema con la dichiarazione delle proprietà dei caratteri su @ font-face ?: Post CSS-Tricks che è correlato al modo in cui i valori corrispondenti nelle proprietà dei caratteri possono essere utilizzati per determinare se un carattere personalizzato viene scaricato e utilizzato dal browser.