Fuentes de vectores de color compactas y compatibles con la compresión con todos tus tipos de gradientes favoritos.
En Chrome 98, los equipos de Chrome y Fuentes agregaron compatibilidad con COLRv1, una evolución del formato de fuente COLRv0 que tiene como objetivo generalizar las fuentes de color agregando gradientes, composicion y combinacin, y mejorando la reutilizacin de formas internas para archivos de fuentes nítidos y compactos que se comprimen bien.
Colorear ahora
En la Web, el texto suele dibujarse en un color especificado en CSS. La fuente no define ningún color en particular, solo indica dónde se deben colocar los píxeles. Por lo general, eso es algo bueno. CSS le permite al autor elegir el color de manera flexible. Sin embargo, a veces, un glifo contiene varios colores que juntos tienen significado. Por ejemplo, esta marca 
con rayas azul claro, rosa y blanco no transmitiría el mismo significado si solo se dibujara en el color de texto actual.
Hoy en día, para la mayoría de los usuarios, los emojis son las únicas fuentes de color que ven. Los emojis suelen aparecer en la Web a través de la fuente de emojis del sistema o mediante la inserción de imágenes (que tiene sus propias complicaciones, 
). Los grandes tamaños de archivo, en especial para las fuentes de color basadas en mapas de bits, dificultaron el uso de fuentes web para emojis. Con la compatibilidad con COLRv1, esperamos ver una proliferación del uso creativo de fuentes de color en la Web y más allá.
Muéstrame tus colores
Creamos algunos ejemplos para que los pruebes:
Los recursos de ejemplo de Google Fonts que se usan en el ejemplo están activos en la API web de Google Fonts. No aparecen en el directorio de fonts.google.com, ya que solo funcionarán en Chrome 98 o versiones posteriores y mostrarán trabajos experimentales.
Ahora puedes crear tus propias fuentes COLRv1 con herramientas gratuitas y de código abierto. Consulta el compilador de fuentes nanoemoji, que te permite compilar fuentes COLRv1 a partir de imágenes de origen SVG y, luego, pruébalas en Chrome 98 o versiones posteriores. Para crear tu propia versión de Bungee Spice, cambia los colores del gradiente con estas instrucciones.
Por ejemplo, puedes modificar la fuente Bungee Spice para que tenga un gradiente azul y rojo, como el siguiente:
Twittea tus resultados a @googlefonts 🙂 ¿Por qué no probar con un gradiente radial o de barrido?
Novedades de COLRv1
El formato de fuente admite varias formas de admitir el color, todas con diferentes compensaciones, pero hasta el momento ninguna tuvo éxito en la Web. (Para obtener más información sobre las compensaciones, consulta la charla de Dominik en la conferencia BlinkOn 15). Chrome 98 admite COLRv1, una evolución de COLRv0. Esperamos que la combinación de capacidades gráficas y archivos compactos de COLRv1 la convierta en una buena opción para muchos casos de uso de fuentes de color. COLRv1 agrega gradientes, composición y combinación, y mejora la reutilización de formas internas para crear archivos aún más compactos.
COLRv1 tiene una capacidad expresiva casi equivalente a SVG Native, además de la combinación y la composición agregadas. Existen cuatro tipos de rellenos de color: colores sólidos, gradientes lineales, gradientes radiales y gradientes de barrido o cónicos. COLRv1 te permite reposicionar y transformar elementos del glifo mediante un conjunto completo de transformaciones de traducción, rotación, transparencia y escala. Además, admite variaciones de fuente y reutiliza los formatos de definición de forma existentes en la fuente.
Piensa en el emoji de la bola de cristal como ejemplo: los elementos destacados con forma de estrella tienen la misma forma, pero diferentes tamaños, lo que significa que solo se puede cambiar la posición de una forma y reutilizarla sin duplicarla dentro del archivo. El formato te permite reutilizar un glifo completo dentro de uno nuevo, sin tener que codificar de forma redundante las mismas formas para cada glifo. Imagina una fuente de color decorativa con decoraciones florales, en la que las mismas formas de flores se colocan en letras diferentes haciendo referencia a los glifos de color existentes. Para el caso de uso de fuentes web, COLRv1 se comprime mucho con woff2. Por ejemplo, una compilación de prueba de Twemoji con COLRv1 requiere un aumento aproximado de 1.2 MB, pero es de alrededor de 0.6 MB en forma de woff2. Una compilación del conjunto completo de glifos de Noto Emoji se reduce de 9 MB para la versión del mapa de bits a 1.85 MB en formato COLRv1+woff2.
Casos de uso de fuentes de colores
Títulos llamativos
Una fuente de color fresca hace que los elementos visuales destacados, los titulares y los banners se destaquen.
No más reemplazo de imágenes: fuentes de emojis
Si admites contenido generado por usuarios, es probable que tus usuarios usen emojis. Hoy en día, es muy común analizar texto y reemplazar cualquier emoji que se encuentre con imágenes para garantizar una renderización multiplataforma coherente y la capacidad de admitir emojis más nuevos que los que admite el SO. Luego, esas imágenes deben volver a cambiarse a texto durante las operaciones del portapapeles. Este es un ejemplo real:
Si tienes una fuente de emojis, solo renderizas el texto en la fuente, de la siguiente manera:
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
De manera similar, en un componente de reacción con emoji, COLRv1 ofrece la oportunidad de usar un archivo de fuente compacto en lugar de un catálogo de recursos de imagen.
Imagina cuántas imágenes tendrías que recuperar para tener un selector de emojis completo.
Colorear en las fuentes de los íconos
El uso de color en las fuentes de íconos agrega claridad y facilita la comprensión de los glifos.
Expresión artística
Las fuentes de color que ahorran espacio permiten nuevas formas de expresión artística en el texto en la Web. En este ejemplo de una fuente árabe de estilo cúfico, se usan gradientes de color como una interpretación artística de cómo podría verse el flujo de tinta de la caligrafía tradicional cuando se aplica al estilo cúfico de la escritura árabe, que se origina a partir de no escribir con una pluma ni tinta, sino tallada en piedra.
Detección de atributos
Por el momento, es posible determinar si un motor de navegador admite un formato de fuente de color específico mediante el espionaje de usuario-agente o mediante la búsqueda en una biblioteca como ChromaCheck de @PixelAmbacht para probar la renderización de glifos de color en Canvas. Ambas soluciones no son óptimas. Las pruebas de funciones deben detectar solo una función específica y evitar el reconocimiento de usuarios-agentes. La biblioteca de ChromaCheck no debería necesitar realizar operaciones de lienzo 2D que requieran muchos recursos para determinar la compatibilidad.
El equipo de Chrome quiere mejorar eso y comenzó una serie de debates [1, 2] en el grupo de trabajo de CSS para proporcionar información sobre la compatibilidad de la tecnología de fuentes del navegador en JavaScript y de forma declarativa en CSS. El equipo planea lanzar una detección de atributos eficiente para la fuente de color y otras tecnologías de fuentes en una versión futura de Chrome.
Si deseas usar fuentes de color en tu proyecto ahora mismo, cuando la compatibilidad con COLRv1 se limita a Chrome, hay dos maneras de hacerlo: Pídele a tu proveedor de fuentes una fuente COLRv1 que también contenga glifos monocromos. Los usuarios-agentes que no admitan COLRv1 recurrirán a la renderización de glifos monocromáticos. Como alternativa, puedes usar la biblioteca ChromaCheck o el espionaje de usuario agente para determinar si la compatibilidad con COLRv1 está disponible. Luego, entrega CSS que cargue fuentes COLRv1 en agentes de usuario compatibles y usa un formato de fuente alternativo, como COLRv0, un formato de fuente de mapa de bits o OpenType SVG en otros navegadores.
Compatibilidad con la paleta de fuentes de CSS
Sería muy útil si usar un conjunto diferente de colores no requiriera una fuente nueva. Afortunadamente, existe un mecanismo: la propiedad font-palette CSS. El equipo de Chrome está trabajando para agregar compatibilidad con font-palette en Chrome.
Las fuentes COLRv1 y tú
Si te interesan las fuentes COLRv1, pregúntale a tu proveedor de fuentes sobre una fuente de color COLRv1 para usar en tu proyecto, prueba los ejemplos y las demostraciones anteriores o, ¿por qué no te animas a crear las tuyas propias?
Si tienes comentarios sobre COLRv1 en Chrome, publica en la lista de distribución blink-dev o informa un problema en nuestra herramienta de seguimiento de problemas. Si tienes comentarios sobre el formato de fuente COLRv1, informa un problema en el repositorio de GitHub de la especificación COLRv1.
Con Chrome 98, nos entusiasma ver cómo COLRv1 aporta un nuevo nivel de creatividad tipográfica a la Web.
Más información
Si te interesan más detalles, tenemos algunos recursos adicionales para ti:
Para obtener información sobre cómo funciona COLRv1 y cómo se implementa en Chrome, consulta la charla en conferencia BlinkOn 15 de Dominik.
- Conferencia internacional de Unicode n.° 45: Fuentes de vectores de color, charla de Roderick Sheeter, Peter Constable y Dominik Röttsches (video, detalles de la charla)
- Compilador de fuentes nanoemoji, que produce fuentes COLRv1 a partir de imágenes SVG
- Repositorio de GitHub de color-fonts de Google Fonts que contiene compilaciones actuales de Noto Emoji, Twemoji y otras fuentes de muestra
- Demostración de DJR de la fuente Bradley Initials, que explora COLRv1
- Herramienta y biblioteca de ChromaCheck para detectar funciones de las tecnologías de fuentes de color disponibles
Agradecimientos
Muchas gracias a Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens y otros por sus contribuciones a COLRv1.