unicode-range

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

La regla CSS unicode-range especifica un rango específico de caracteres a ser usados por una fuente definida  @font-face y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.

El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.

Sintaxis

/* valores <unicode-range> */
unicode-range: U+26;               /* un único código */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* rango de códigos */
unicode-range: U+4??;              /* rango por expresión */
unicode-range: U+0025-00FF, U+4??; /* multiples valores */

Valores

un único código
Un único código de caracter Unicode, por ejemplo U+26.
un rango de código
Un rango de códigos de caracter Unicode. Asi que, por ejemplo, U+0025-00FF significa incluir todos caracteres en el rango U+0025 a U+00FF.
rango por expresión
Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter '?', asi que, por ejemplo U+4?? significa incluir todos los caracteres en el rango U+400 a U+4FF.

Ejemplos

Hemos creado una etiqueta HTML que contiene un elemento <div>, que incluye un simbolo &, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio,  usaremos una fuente sans-serif, Helvetica para el texto, y una fuente serif, Times New Roman, para el caracter &.

<div>Me & You = Us</div>

En el CSS, puedes ver que en efecto estamos definiendo una separación completa @font-face el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter & en un elemento <span> y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;	
}

Reultado

What the example should looks like if your browser supports it.

Especificación

Especificación Estado Comentario
CSS Fonts Module Level 3
La definición de 'unicode-range' en esta especificación.
Candidate Recommendation Initial definition

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
unicode-rangeChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 36IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo 3.2WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 36Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo