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 Fonts agregaron compatibilidad con COLRv1, una evolución del formato de fuente COLRv0 destinado a ampliar la difusión de las fuentes de color mediante la adición de gradientes, la composición y la combinación, y mejoró la reutilización de formas internas para archivos de fuentes nítidos y compactos que se comprimen bien.
Color ahora
En la Web, el texto generalmente se dibuja con un color especificado en CSS. La fuente no define ningún color en particular, solo indica el lugar en el que se deben colocar los píxeles. Por lo general, eso es algo bueno. CSS permite al autor elegir un color de manera flexible. Sin embargo, a veces un glifo contiene varios colores que juntos tienen significado. Por ejemplo, esta marca 
con rayas celestes, rosadas y blancas no transmitiría el mismo significado si se hubiera dibujado en el color actual del texto.
Actualmente, para la mayoría de los usuarios, los emojis son las únicas fuentes de color que ven. Por lo general, los emojis aparecen 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 archivos de gran tamaño, en especial para las fuentes de colores basadas en mapas de bits, dificultan el uso de fuentes web para emojis. Con la compatibilidad con COLRv1, esperamos ver una proliferación del uso creativo de fuentes de colores en la Web y más allá.
Muéstrame tus colores
Hemos creado algunos ejemplos para que juegues con los siguientes:
Los elementos de ejemplo de Google Fonts que se usaron en el ejemplo se encuentran 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 muestran 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. Luego, pruébalas en Chrome 98 o versiones posteriores. Intenta dar tu propio giro en Bungee Spice. Para ello, cambia los colores del gradiente siguiendo estas instrucciones.
Por ejemplo, puedes modificar la fuente Bungee Spice para que tenga un gradiente azul y rojo de la siguiente manera:
Twittea tus resultados a @googlefonts 🙂 ¿Por qué no probar con un gradiente radial o de barrido?
Nuevo con COLRv1
El formato de fuente admite varias formas de admitir colores, todas con diferentes compensaciones, pero ninguna ha tenido éxito en la Web hasta el momento. (Para obtener más información sobre las compensaciones, consulta la charla en conferencia BlinkOn 15 de Dominik). Chrome 98 ofrece compatibilidad para 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 que se agregan en la parte superior. Existen cuatro tipos de rellenos de color: colores sólidos, gradientes lineales, gradientes radiales y gradientes de barrido/cónico. COLRv1 te permite cambiar la posición y transformar elementos de los glifos mediante un conjunto completo de transformaciones de traducción, rotación, transparencia y escala. Además, admite variaciones de fuentes y reutiliza los formatos de definición de formas 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 de diferentes tamaños, lo que significa que solo una forma se puede cambiar de posición y volver a usar sin duplicación dentro del archivo. El formato te permite reutilizar un glifo completo dentro de un nuevo glifo, sin tener que codificar de forma redundante las mismas formas para cada glifo. Imagina una fuente de color decorativo con decoraciones florales, en la que se colocan las mismas formas de flores en diferentes letras solo haciendo referencia a los glifos de color existentes. Para el caso de uso de fuentes web, COLRv1 se comprime bien con woff2. Por ejemplo, una compilación de prueba de Twemoji con COLRv1 toma alrededor de 1.2 MB aumentados, pero 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 de mapa de bits a 1.85 MB en formato COLRv1+woff2.
Casos de uso de fuentes a color
Títulos pegadizos
Una fuente con un color actualizado permite que realmente se destaquen los elementos visuales, los títulos y los banners.
No más reemplazo de imágenes: fuentes de emojis
Si admites contenido generado por usuarios, es probable que estos usen emojis. Hoy en día, es muy común analizar texto y reemplazar cualquier emoji que aparezca 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. Esas imágenes luego se deben volver a cambiar a texto durante las operaciones del portapapeles. Aquí hay un ejemplo real:
Si tienes una fuente de emojis, solo debes renderizar 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>
Del mismo modo, 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 un selector de emojis completo.
Color de las fuentes de los íconos
El uso de colores en las fuentes de íconos agrega claridad y hace que los glifos sean más fáciles de comprender.
Expresión artística
Las fuentes de color con uso eficiente del espacio permiten nuevas formas de expresión artística en los textos de la Web. En este ejemplo de una fuente árabe de estilo kufi, se usan gradientes de color como una interpretación artística de cómo se vería el flujo de tinta de la caligrafía tradicional cuando se aplica al estilo kufi de escritura árabe, que se origina porque no está escrito con plumilla y tinta, sino tallado en piedra.
Detección de funciones
Por el momento, es posible averiguar si un motor de navegador admite un formato de fuente de color específico mediante el reconocimiento del usuario-agente o con una búsqueda en una biblioteca como ChromaCheck de @PixelAmbacht para probar la renderización de glifos de color en Canvas. Ninguna de las soluciones es óptima. 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 inició 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 funciones eficiente para la fuente en color y otras tecnologías de fuentes en una versión futura de Chrome.
Si deseas usar fuentes de color en tu proyecto en este momento cuando la compatibilidad con COLRv1 está limitada a Chrome, hay dos formas de hacerlo: pídele a tu proveedor de fuentes una fuente COLRv1 que también contenga glifos monocromáticos. Los usuarios-agentes que no admiten COLRv1 volverán a renderizar glifos monocromáticos. Como alternativa, puedes usar la biblioteca de ChromaCheck o el análisis de usuarios-agentes para determinar si la compatibilidad con COLRv1 está disponible. Luego, proporcionarás CSS que cargue las fuentes COLRv1 en la compatibilidad con usuarios-agentes y usarás un formato de fuente alternativo, como COLRv0, un formato de fuente de mapa de bits o SVG de OpenType en otros navegadores.
Compatibilidad con font-palette de CSS
Sería muy útil si, para usar un conjunto diferente de colores, no se necesitaría una fuente nueva. Afortunadamente, existe un mecanismo: la propiedad de CSS font-palette. El equipo de Chrome está trabajando para agregar compatibilidad con la paleta de fuentes en Chrome.
Fuentes COLRv1 y tú
Si las fuentes COLRv1 despiertan tu interés, pregúntale a tu proveedor de fuentes cuál es la fuente de color COLRv1 que puedes usar en tu proyecto, prueba los ejemplos y las demostraciones anteriores o prueba crear las tuyas de inmediato.
Si tienes comentarios sobre COLRv1 en Chrome, publícalo en la lista de distribución de blink-dev o informa un problema mediante nuestra Herramienta de seguimiento de errores. Si tienes comentarios sobre el formato de la fuente COLRv1 en sí, informa un problema en el repositorio de especificaciones de COLRv1 en GitHub.
Con Chrome 98, nos entusiasma la forma en que COLRv1 incorpora un nivel completamente nuevo de creatividad tipográfica en la Web.
Más información
Si te interesa obtener más detalles, tenemos algunos recursos más para ti:
Para obtener más información sobre cómo funciona COLRv1 y cómo se implementa en Chrome, mira la charla en la conferencia BlinkOn 15 de Dominik.
- Conferencia Internacional Unicode #45: Vector Color Fonts, charla de Roderick Sheetser, Peter Constable y Dominik Röttsches (video, detalles de la conversación)
- compilador de fuentes nanoemoji, que produce fuentes CORv1 a partir de imágenes SVG
- El repositorio de GitHub de fuentes de color de Google Fonts, que contiene compilaciones actuales de Noto Emoji, Twemoji y otras fuentes de ejemplo
- Exhibición de DJR con la fuente Bradley Initials, que explora COLRv1
- Herramienta y biblioteca ChromeCheck para detectar funciones de 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.