Propiedad CSS unicode-range - Uso y ejemplos

El descriptor unicode-range define el rango específico de caracteres que una fuente, especificada mediante la regla at @font-face, puede proporcionar. Es un descriptor, no una propiedad independiente: solo tiene sentido dentro de un bloque @font-face, donde restringe los puntos de código Unicode para los que se utiliza ese archivo de fuente concreto.

El navegador usa este rango como indicación de descarga. Si la página no utiliza ningún carácter del rango, el archivo de fuente no se descarga en absoluto. Si al menos un carácter del rango aparece en la página, se descarga el archivo de fuente completo. Esto convierte a unicode-range en la base del subsetting de fuentes — servir un archivo de fuente pequeño por escritura (latín, cirílico, griego, etc.) y descargar solo los que la página realmente necesita. Cuando @font-face no es compatible, se utilizan las fuentes de reserva de tu lista font-family.

Advertencia

Los puntos Unicode van precedidos de U+ seguido de hasta seis caracteres que forman el código del carácter. Los puntos o rangos que no tengan este formato se consideran no válidos y harán que se ignore la propiedad.

Hay muchos bloques Unicode disponibles. El Latín Básico (U+0020-007F) abarca las letras, dígitos y signos de puntuación estándar del inglés, y es el rango más habitual para sitios en inglés.

Valor inicial	U+0-10FFFF
Se aplica a	El bloque @font-face en el que se incluye la propiedad.
Heredable	Sí.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.unicodeRange = "U+0025-00FF";

Sintaxis

Valores del descriptor CSS unicode-range

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

Ejemplo del descriptor unicode-range:

Ejemplo de código del descriptor 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>

Pruébalo tú mismo »

Múltiples reglas @font-face para subsetting de fuentes

El caso de uso principal de unicode-range es dividir una fuente en subconjuntos para reducir el tamaño de la descarga. Cada subconjunto define un rango de caracteres específico:

@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 */
}

El navegador descarga únicamente el subconjunto que contiene los caracteres utilizados en la página. Ten en cuenta que todos los subconjuntos comparten el mismo nombre font-family — eso es lo que permite al navegador tratarlos como una sola fuente lógica dividida en varios archivos.

Rangos con comodín

El comodín ? representa cualquier dígito hexadecimal individual, lo que permite expresar un bloque completo de forma compacta. Estas tres declaraciones son equivalentes:

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 */

También puedes listar varios rangos separados por comas:

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

Compatibilidad con navegadores

unicode-range es compatible con todos los navegadores modernos (Chrome, Firefox, Safari y Edge). Dado que solo afecta a qué archivo de fuente se descarga, los navegadores que no lo reconocen simplemente descargan la fuente de la manera habitual — por lo que su degradación es elegante y es seguro utilizarlo en cualquier lugar.

Valores

Valor	Descripción
single codepoint	Un punto de código de carácter Unicode representado en forma de uno a seis dígitos hexadecimales.
codepoint range	Un rango de puntos de código Unicode representado en forma de dos puntos de código Unicode separados por un guion. Especifica el inicio y el fin del rango.
wildcard range	Un rango de puntos de código Unicode que contiene caracteres comodín, usando el carácter `?` para indicar cualquier dígito hexadecimal (p. ej., `U+00??`).
initial	Establece la propiedad en su valor por defecto.
inherit	Hereda la propiedad de su elemento padre.

Práctica

El descriptor CSS unicode-range establece el rango específico de caracteres que se usarán de una fuente definida por

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