La unicode-rangepropiedad en CSS es utilizada por el @font-facepara definir los caracteres que son compatibles con la fuente.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+00-FF; /* Define the available characters */ )En otras palabras, @font-facese referirá a la propiedad y determinará si debe descargar y usar la fuente en función de si los caracteres o el rango de caracteres coinciden con los del documento HTML.
Tipo de letra: Hola HTML, ¿alguno de los siguientes caracteres coincide con el de la página?
HTML: Sí, muchos de ellos lo hacen.
Font-Face: Genial, aquí hay un archivo de fuente que debe descargar para mostrar esos caracteres.
La distinción semántica importante que debemos mencionar aquí es que unicode-rangedetermina para qué caracteres se puede usar una fuente, en lugar de qué caracteres está disponible para usar una fuente. En otras palabras, si declaramos un unicode-rangesobre @font-facey los personajes que se han cargado en un partido de documento HTML de ese rango, entonces el tipo de letra a descargar y ser objeto de un uso.
Puede imaginar los beneficios de rendimiento que se abren con esta propiedad. Por ejemplo, podemos cargar una fuente personalizada solo si admite caracteres específicos en lugar de cargar siempre la fuente en todas las situaciones.
Incluso hay una forma de combinar dos @font-faceconjuntos en la misma font-facedeclaración de propiedad, gracias a un útil truco compartido por Jake Archibald. La idea es que un @font-faceconjunto anule al otro en función del unicode-rangerendimiento combinado , la optimización o simplemente la mejora de la tipografía de una página.
Valores
Cualquier código o rango de caracteres Unicode es un unicode-rangevalor aceptable . Notará que los puntos Unicode están precedidos por un U+seguido de hasta seis caracteres que componen el código de carácter. Los puntos o rangos que no siguen este formato se consideran inválidos y harán que se ignore la propiedad.
- Carácter único (p
U+26. Ej. ) - Rango de caracteres (p
U+0025-00FF. Ej. ) - Rango de comodines (p
U+4??. Ej. )
El rango de comodines es el más complicado del grupo. Cada uno ?representa un comodín donde cualquier valor coincidirá. Pensarías que eso significa que puedes usar comodines para todo con algo como esto:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Sin embargo, esto no funcionará. La razón es que al principio con ?implica un código de carácter que va con 0, lo que significa que se pueden usar hasta cinco caracteres de signo de interrogación a pesar de que los Unicodes aceptan hasta seis caracteres en total.
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )Hay un montón de opciones Unicode por ahí. El latín básico ( 0020-007F) es probablemente el rango más común para los sitios en inglés, pero unicode-table.com proporciona una lista completa de todos los rangos disponibles con códigos para caracteres específicos.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Otras lecturas
- Especificación de nivel 3 del módulo de fuentes CSS
- Tabla Unicode: un recurso para hacer referencia a códigos y conjuntos de caracteres Unicode.
- Usando @ font-face: publicación CSS-Tricks que cubre cómo
@font-facefunciona con diferentes técnicas y ejemplos de trabajo. - ¿Cuál es el problema con la declaración de propiedades de fuente en @ font-face ?: Publicación de CSS-Tricks relacionada con la forma en que se pueden usar los valores coincidentes en las propiedades de fuente para determinar si el navegador descarga y usa una fuente personalizada.