unicode-range
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;
}
Especificaciones
| Specification |
|---|
| CSS Fonts Module Level 4 # unicode-range-desc |
Compatibilidad con navegadores
BCD tables only load in the browser