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-00FFsignifica incluir todos caracteres en el rangoU+0025aU+00FF. - rango por expresión
- Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter
'?', asi que, por ejemploU+4??significa incluir todos los caracteres en el rangoU+400aU+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
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.