Propiedad unicode-range de CSS

El descriptor unicode-range define el rango específico de caracteres que se utilizan con las fuentes especificadas por la regla @font-face para su uso en la página. Cuando @font-face no es compatible, se debe incluir una fuente de respaldo.

Si la página no utiliza un carácter dentro del rango, la fuente no se descarga. Si se utiliza al menos un carácter, se descarga la fuente completa.

advertencia
Los puntos Unicode van precedidos por 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 inválidos y provocarán que se ignore la propiedad.

Existen muchas opciones de Unicode para utilizar. El Latín Básico (0020—007F) es el rango más común para sitios en inglés.

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

Sintaxis

Valores del descriptor unicode-range de CSS

css

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

Ejemplo del descriptor unicode-range:

Ejemplo de código del descriptor unicode-range de CSS

html

<!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>

Try it Yourself »

Múltiples reglas @font-face para la división de fuentes en subconjuntos

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:

css

@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.

Valores

Valor	Descripción
punto de código único	Un punto de código de carácter Unicode que se representa en forma de uno a seis dígitos hexadecimales.
rango de puntos de código	Un rango de puntos de código Unicode que se representa en forma de dos puntos de código Unicode separados por un guion. Especifica el inicio y el final de un rango.
rango comodín	Un rango de puntos de código Unicode que contiene caracteres comodín, utilizando el carácter `?` para indicar cualquier dígito hexadecimal (por ejemplo, `U+00??`).
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento principal.

Práctica

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

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

Propiedad unicode-range de CSS ​

Sintaxis ​

Ejemplo del descriptor unicode-range: ​

Múltiples reglas @font-face para la división de fuentes en subconjuntos ​