Fuentes de vectores de color compactas y fáciles de usar con la compresión, con todas tus de gradientes.
En Chrome 98, los equipos de Chrome y Fuentes agregaron compatibilidad con COLRv1, una la evolución del formato de fuente COLRv0 destinado a extender a las fuentes de color las agregar gradientes, componer y combinar, y mejorar la reutilización de formas internas para archivos de fuente nítidos y compactos que se comprimen bien.
Color ahora
En la Web, el texto generalmente se dibuja en un color especificado en CSS. La fuente sí
no define ningún color en particular, solo indica dónde deben quedar los píxeles
y dónde se colocará. Eso suele ser bueno. CSS le permite al autor elegir de manera flexible un
color. Sin embargo, a veces, un glifo contiene varios colores que juntos tienen
significado. Por ejemplo, esta marca 
con rayas celeste, rosa y blanca no
transmiten el mismo significado si simplemente se dibujó 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. Emojis
normalmente 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, 
). Archivo grande
especialmente para fuentes de color basadas en mapas de bits, ha sido difícil usar
fuentes para emojis. Con la compatibilidad con COLRv1, esperamos ver una proliferación de
cómo se usa la fuente de color de las creatividades tanto en la Web como en otros lugares.
Muéstrame tus colores
Hemos creado un par de ejemplos para que pruebes:
Los recursos de ejemplo de Google Fonts que se usan en el ejemplo están publicados en la API web de Google Fonts: Son que no aparecen en el directorio de fonts.google.com como 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. Cheque el compilador de fuentes nanoemoji que te permite crear fuentes COLRv1 a partir de imágenes de origen SVG, y luego probarlas Chrome 98 o una versión posterior. Prueba dar tu propio toque a Bungee Spice cambiando la colores de 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?
Nuevo con COLRv1
El formato de fuente admite varias formas de respaldar el color, todas con diferentes concesiones, pero ninguna ha tenido éxito en la Web hasta ahora. (Para obtener más información, sobre las ventajas y desventajas, consulta la charla en conferencia de BlinkOn 15 de Dominik). Chrome 98 admite COLRv1, una evolución de COLRv0. Esperamos que La combinación de funciones gráficas y archivos compactos de COLRv1 lo convertirá en un es una buena opción para muchos casos de uso de fuentes de colores. COLRv1 agrega gradientes, composición y combinación y mejora reutilización de formas internas para hacer archivos aún más compactos.
COLRv1 tiene una capacidad expresiva casi equivalente a nativo de SVG Plus combinación y composición agregadas arriba. Existen cuatro tipos de rellenos de color: colores sólidos, gradientes lineales y radiales. y gradientes de barrido/cónico. COLRv1 te permite reposicionar y transformar elementos glifos con un conjunto completo de funciones para trasladar, rotar, cambiar y escalar de datos. Además, es compatible con variaciones y reutilización de fuentes. formatos de definición de forma existentes en la fuente.
Piensa en el emoji de la bola de cristal como un ejemplo: los reflejos en forma de estrella son la misma forma, pero de diferentes tamaños, lo que significa que solo se puede usar una forma se reposicionan y se reutilizan sin duplicados dentro del archivo. El formato permite que te permite reutilizar un glifo completo dentro de uno nuevo, sin tener que para codificar las mismas formas en cada glifo. Imagina una fuente de color decorativa con decoraciones florales, en las que las mismas formas de flores se colocan en diferentes letras con solo hacer referencia a los glifos de color existentes. Para el caso de uso de fuentes web, COLRv1 comprime bien con woff2. Por ejemplo, una compilación de prueba de Twemoji con COLRv1 tarda aproximadamente 1.2 MB, pero es de aproximadamente 0.6 MB en forma de woff2. Una compilación del El conjunto completo de glifos de Noto Emoji se redujo 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 color
Titulares pegadizos
Una fuente de colores renovada hace que los elementos visuales, los títulos y los banners se destaquen realmente. y sale de ella.
No más reemplazo de imágenes: fuentes de emojis
Si admites contenido generado por usuarios, es probable que estos utilicen emojis. Hoy es muy común escanear texto y reemplazar cualquier emoji que se encuentre con imágenes para garantizar una renderización multiplataforma coherente y la capacidad de admitir versiones más recientes más emojis que los que admite el SO. Esas imágenes se deben volver a convertir en texto. durante las operaciones del portapapeles. Aquí hay 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>
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.
Colorear en las fuentes de los íconos
El uso de color en las fuentes de iconos agrega claridad y hace que los glifos sean más fáciles de entender.
Expresión artística
Las fuentes de color eficientes en el espacio permiten nuevas formas de expresión artística en el texto. 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 el flujo de tinta de la caligrafía tradicional si se aplican al estilo kufi de la escritura árabe, que se origina de no estar escrito con plumilla y tinta, sino tallado en piedra.
Detección de funciones
Por el momento, averiguar si un motor de navegador admite un color específico el formato de fuente es posible mediante el análisis de usuarios-agentes o a través de una búsqueda biblioteca como ChromaCheck de @PixelAmbacht para probar la renderización del color. glifos en Canvas. Ninguna de las dos soluciones son óptimas. La prueba de atributos debería detectar una función específica y evita hacer sniffs por parte del usuario-agente. ChromaCheck biblioteca no debería necesitar realizar operaciones de lienzo 2D que consumen muchos recursos para determinar la asistencia.
El equipo de Chrome quiere mejorar eso y comenzó una serie de debates [1, 2] en el grupo de trabajo de CSS. brindar información sobre la compatibilidad de la tecnología de fuentes del navegador en JavaScript y declarativamente en CSS. El equipo planea lanzar una detección de funciones eficiente para y otras tecnologías de fuentes en una versión futura de Chrome.
Si quieres usar fuentes de color en tu proyecto ahora mismo cuando COLRv1 la compatibilidad está limitada a Chrome, puedes hacerlo de dos maneras: Pregunta a tu fuente para una fuente COLRv1 que también contiene glifos monocromáticos. Usuarios-agentes que no sea compatible con COLRv1 volverá a renderizar el modo monocromático glifos. Como alternativa, puedes usar la biblioteca de ChromaCheck o el usuario-agente para determinar si la compatibilidad con COLRv1 está disponible. Luego, entregas los CSS que carga fuentes COLRv1 en agentes de usuario compatibles y usa una fuente alternativa como COLRv0, un formato de fuente de mapa de bits u OpenType SVG en otros navegadores.
Compatibilidad con paleta de fuentes de CSS
Sería muy útil si no usaras un conjunto de colores diferente requieren una fuente nueva. Afortunadamente, existe un mecanismo: el propiedad de CSS de font-palette. El 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 sobre un color COLRv1. para usar en tu proyecto, prueba los ejemplos y las demostraciones o por qué no sumergirse de lleno y experimentar para crear tu propio contenido?
Si tienes comentarios sobre COLRv1 en Chrome, publícalos en la lista de distribución de blink-dev o informa un problema en nuestra Herramienta de seguimiento de errores. Si tienes comentarios en el formato de fuente COLRv1, informa un problema en Repositorio de GitHub de la especificación de COLRv1.
Con Chrome 98, nos entusiasma ver que COLRv1 ofrece un nivel completamente nuevo de creatividad tipográfica en la web.
Más información
Si deseas obtener más información, tenemos algunos recursos más 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 colores de vectores, charla de Roderick Folleto, Peter Constable y Dominik Röttsches (Video, detalles de la conversación)
- el compilador de fuentes nanoemoji, que produce Fuentes COLRv1 de imágenes SVG
- Google Fonts Repositorio de GitHub de color-fonts que contiene compilaciones actuales de emojis de Noto, Twemoji y otras fuentes de ejemplo
- Exhibición de DJR de la fuente Bradley Initials, explorando COLRv1.
- La herramienta y la biblioteca ChromaCheck 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 a COLRv1.