Proprietà CSS unicode-range - Utilizzo ed Esempi

Il descrittore unicode-range definisce l'intervallo specifico di caratteri che un font, specificato dalla regola at @font-face, è autorizzato a fornire. È un descrittore, non una proprietà autonoma: ha significato soltanto all'interno di un blocco @font-face, dove restringe i code point Unicode per cui viene utilizzato quel particolare file di font.

Il browser usa questo intervallo come suggerimento per il download. Se la pagina non utilizza alcun carattere nell'intervallo, il file del font non viene scaricato affatto. Se almeno un carattere nell'intervallo compare nella pagina, l'intero file del font viene scaricato. Questo rende unicode-range la base del subsetting dei font — servire un file di font ridotto per ogni script (Latino, Cirillico, Greco, ecc.) e recuperare solo quelli effettivamente necessari alla pagina. Quando @font-face non è supportato, vengono usati i font di fallback presenti nell'elenco font-family.

Attenzione

I code point Unicode sono preceduti da U+ seguito da un massimo di sei caratteri che compongono il codice del carattere. I code point o gli intervalli che non rispettano questo formato sono considerati non validi e faranno sì che la proprietà venga ignorata.

Esistono molti blocchi Unicode tra cui scegliere. Basic Latin (U+0020-007F) copre le lettere inglesi standard, le cifre e la punteggiatura, ed è l'intervallo più comune per i siti in lingua inglese.

Valore iniziale	U+0-10FFFF
Si applica a	Il blocco @font-face in cui la proprietà è inclusa.
Ereditato	Sì.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.unicodeRange = "U+0025-00FF";

Sintassi

Valori del descrittore CSS unicode-range

unicode-range: single codepoint | codepoint range | wildcard range | initial | inherit;

Esempio del descrittore unicode-range:

Esempio di codice del descrittore CSS unicode-range

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'MyFont'; /* Define the custom font name */
        src: url('myfont.woff2') format('woff2'), 
             url('myfont.woff') format('woff'); /* Define the font source */
        unicode-range: U+00-FF; /* Define the available characters */
      }
      div {
        font-size: 3em;
        font-family: MyFont, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-range descriptor example</h2>
    <div>Mary & Jack are friends.</div>
  </body>
</html>

Provalo tu stesso »

Regole @font-face multiple per il subsetting dei font

Il caso d'uso principale di unicode-range è la suddivisione di un font in sottoinsiemi per ridurre le dimensioni del download. Ogni sottoinsieme definisce un intervallo specifico di caratteri:

@font-face {
  font-family: 'MyFont';
  src: url('myfont-latin.woff2') format('woff2');
  unicode-range: U+00-FF; /* Basic Latin */
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF; /* Cyrillic */
}

Il browser scarica solo il sottoinsieme che contiene i caratteri utilizzati nella pagina. Si noti che ogni sottoinsieme condivide lo stesso nome font-family — questo è ciò che consente al browser di trattarli come un unico font logico suddiviso in più file.

Intervalli con caratteri jolly

Il carattere jolly ? rappresenta qualsiasi singola cifra esadecimale, ed è un modo compatto per esprimere un intero blocco. Queste tre dichiarazioni sono equivalenti:

unicode-range: U+0000-00FF; /* explicit range */
unicode-range: U+00??;      /* wildcard: U+0000 to U+00FF */
unicode-range: U+0-FF;      /* leading zeros are optional */

È anche possibile elencare più intervalli, separati da virgole:

/* Basic Latin + Latin-1 Supplement + the euro sign */
unicode-range: U+0000-00FF, U+0131, U+20AC;

Supporto browser

unicode-range è supportato in tutti i browser moderni (Chrome, Firefox, Safari ed Edge). Poiché influisce solo su quale file di font viene scaricato, i browser che non lo riconoscono semplicemente scaricano il font come al solito — quindi degrada in modo elegante ed è sicuro da usare ovunque.

Valori

Valore	Descrizione
single codepoint	Un code point Unicode rappresentato nella forma di una o sei cifre esadecimali.
codepoint range	Un intervallo di code point Unicode rappresentato nella forma di due code point Unicode separati da un trattino. Specifica l'inizio e la fine di un intervallo.
wildcard range	Un intervallo di code point Unicode contenente caratteri jolly, usando il carattere `?` per indicare qualsiasi cifra esadecimale (ad es., `U+00??`).
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Pratica

Il descrittore CSS unicode-range imposta l'intervallo specifico di caratteri da utilizzare da un font definito da

@font-family@font-face@font-weight