unicode-range

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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
The definition of 'unicode-range' in that specification.
Candidate Recommendation Initial definition

Compatibilidad con navegadores

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte básico 44 (44)[1] (Yes)[2] 9.0[2] (Yes)[2] (Yes)[2]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Soporte básico (Yes) 44.0 (44)[1] 9.0 No support 10.0 (Yes)

[1] Desde Firefox 4 hasta Firefox 34, la regla unicode-range en @font-face son analizados pero el rango de códigos Unicode eran ignorado. Desde Firefox 35, unicode-range puede ser usado en plataformas que no son Linux usando la preferencia layout.css.unicode-range.enabled, el cual viene habilitado por defecto en las builds nightly/developer. En Linux, esto es posible desde Firefox 41.

[2] Firefox y Chrome respetan el valor unicode-range cuando deciden la fuente a descargar (desde Chrome 36, Chromium bug 247920). Safari e Internet Explorer ignoran el valor unicode-range cuando deciden las fuentes a descargar pero las respetan cuando decir que fuente usar.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: giobeatle1794
 Última actualización por: giobeatle1794,