los unicode-range El descriptor CSS establece el rango específico de caracteres que se utilizarán a partir de una fuente definida por @font-face y disponible para su uso en la página actual. Si la página no usa ningún carácter en este rango, la fuente no se descarga; si usa al menos uno, se descarga la fuente completa.

Sintaxis

/*  values */unicode-range: U+26;/* single codepoint */unicode-range: U+0-7F;unicode-range: U+0025-00FF;/* codepoint range */unicode-range: U+4??;/* wildcard range */unicode-range: U+0025-00FF, U+4??;/* multiple values */

Valores

punto de código único
Un único punto de código de carácter Unicode, por ejemplo U+26.
rango de puntos de código
Una gama de puntos de código Unicode. Así por ejemplo, U+0025-00FF medio incluir todos los personajes en el rango U+0025 para U+00FF.
rango comodín
Un rango de puntos de código Unicode que contienen caracteres comodín, que utiliza el '?' personaje, por ejemplo U+4?? medio incluir todos los personajes en el rango U+400 para U+4FF.

Descripción

El propósito de este descriptor es permitir que los recursos de fuentes se segmenten de modo que un navegador solo necesite descargar el recurso de fuentes necesario para el contenido de texto de una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proporcionar recursos de fuentes independientes para inglés, griego y japonés. Para los usuarios que ven la versión en inglés de una página, no es necesario descargar los recursos de fuentes para fuentes griegas y japonesas, lo que ahorra ancho de banda.

Definicion formal

Regla relacionada @font-face
Valor inicial U+0-10FFFF
Valor calculado Como se especificó

Sintaxis formal

#

Ejemplos de

Usar una fuente diferente para un solo carácter

En este ejemplo creamos un HTML simple que contiene un solo

elemento, incluido un ampersand, que queremos diseñar con una fuente diferente. Para hacerlo obvio, usaremos una fuente sans-serif, Helvética, para el texto y una fuente serif, Times New Roman, para el ampersand.

En el CSS, de hecho, estamos definiendo un @font-face que solo incluye un solo carácter, lo que significa que solo este carácter tendrá estilo con esta fuente. También podríamos haber hecho esto envolviendo el ampersand en un y aplicando una fuente diferente solo para eso, pero ese es un elemento adicional y un conjunto de reglas.

HTML

<div>Me & You = Usdiv>

CSS

@font-facefont-family:'Ampersand';src:local('Times New Roman');unicode-range: U+26;divfont-size: 4em;font-family: Ampersand, Helvetica, sans-serif;

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de fuentes CSS nivel 3
La definición de ‘rango unicode’ en esa especificación.		 Recomendación Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
unicode-range 1 12 36 9 15 3.2 ≤37 18 36 14 3 1.0

Ver también

  • font-display
  • font-family
  • font-stretch
  • font-style
  • font-weight
  • font-variant
  • font-feature-settings
  • font-variation-settings
  • src