Font vektor warna yang ringkas, cocok untuk kompresi, dan berisi semua ragam gradien favorit Anda.
Di Chrome 98, tim Chrome dan Fonts telah menambahkan dukungan untuk COLRv1, evolusi format font COLRv0 yang dimaksudkan untuk memperluas font warna dengan menambahkan gradien, pengomposisian dan perpaduan, serta penggunaan ulang bentuk internal yang lebih baik untuk file font yang tajam dan ringkas yang dikompresi dengan baik.
Warnai sekarang
Di web, teks biasanya digambar dengan warna yang ditentukan dalam CSS. Font tidak
menentukan warna tertentu, tetapi hanya menunjukkan tempat piksel harus
ditempatkan. Itu biasanya hal yang baik. CSS memungkinkan penulis
memilih warna secara fleksibel. Namun, terkadang glyph berisi beberapa warna yang sama-sama memiliki makna. Misalnya, flag ini 
dengan garis biru muda, merah muda, dan putih tidak akan
memberikan arti yang sama jika hanya digambar dalam warna teks saat ini.
Saat ini, bagi sebagian besar pengguna, emoji adalah satu-satunya font warna yang mereka lihat. Emoji
biasanya muncul di web melalui font emoji sistem, atau dengan menyisipkan gambar
(yang memiliki detail sendiri, 
). Ukuran file
yang besar terutama untuk font warna berbasis bitmap telah menyulitkan penggunaan font
web untuk emoji. Dengan mendukung COLRv1, kami berharap dapat melihat proliferasi
penggunaan font warna kreatif di web dan lainnya.
Tampilkan warna Anda
Kami telah membuat beberapa contoh untuk Anda coba:
Contoh aset dari Google Fonts yang digunakan dalam contoh tersedia di Google Fonts web API. Fungsi tersebut tidak tercantum dalam direktori di fonts.google.com karena hanya akan berfungsi di Chrome 98 atau yang lebih baru dan menampilkan karya eksperimental.
Sekarang Anda dapat membuat font COLRv1 sendiri menggunakan alat gratis dan open source. Lihat compiler font nanoemoji yang memungkinkan Anda membuat font COLRv1 dari gambar sumber SVG, lalu cobalah di Chrome 98 atau yang lebih baru. Coba buat kreasi Anda sendiri di Bungee Spice dengan mengubah warna gradien menggunakan petunjuk ini.
Misalnya, Anda dapat memodifikasi font Bungee Spice agar memiliki gradasi biru dan merah, seperti ini:
Tweet hasil Anda ke @googlefonts 🙂 Mengapa tidak mencoba gradien radial atau sweep?
Baru dengan COLRv1
Format font mendukung beberapa cara untuk mendukung warna, semua dengan konsekuensi yang berbeda – tetapi sejauh ini belum ada yang berhasil di web. (Untuk mempelajari lebih lanjut tentang konsekuensinya, lihat presentasi konferensi BlinkOn 15 Dominik.) Chrome 98 menghadirkan dukungan untuk COLRv1, evolusi dari COLRv0. Kami berharap kombinasi kemampuan grafis dan file ringkas COLRv1 akan menjadikannya pilihan yang bagus untuk banyak kasus penggunaan font warna. COLRv1 menambahkan gradien, pengomposisian, dan penggabungan, serta meningkatkan penggunaan kembali bentuk internal untuk membuat file yang lebih ringkas.
COLRv1 memiliki kemampuan ekspresif yang kurang lebih setara dengan Native SVG plus gabungan dan pengomposisian yang ditambahkan di atas. Ada empat jenis isian warna: warna solid, gradien linier, gradien radial, dan gradien sapu/kerucut. COLRv1 memungkinkan Anda memosisikan ulang dan mengubah elemen glyph menggunakan serangkaian transformasi terjemahan, rotasi, transparan, dan skala. Selain itu, font ini memiliki dukungan untuk variasi font dan menggunakan kembali format definisi bentuk yang ada dalam font.
Anggap emoji bola kristal sebagai contoh: Sorotan berbentuk bintang memiliki bentuk yang sama tetapi berbeda ukurannya, yang berarti hanya satu bentuk yang dapat diposisikan ulang dan digunakan kembali tanpa duplikasi di dalam file. Format ini memungkinkan Anda menggunakan kembali glyph lengkap dalam glyph baru, tanpa harus mengenkode bentuk yang sama secara redundan untuk setiap glyph. Bayangkan font warna dekoratif dengan dekorasi bunga, dengan bentuk bunga yang sama ditempatkan pada huruf yang berbeda hanya dengan mereferensikan glyph warna yang ada. Untuk kasus penggunaan {i>font<i} web, COLRv1 dikompresi dengan baik di bawah woff2. Misalnya, build pengujian Twemoji yang menggunakan COLRv1 memerlukan waktu sekitar 1,2 MB yang di-inflate, tetapi sekitar 0,6 MB dalam bentuk woff2. Build rangkaian lengkap Emoji Noto dikurangi dari 9 MB untuk versi bitmap menjadi 1,85 MB dalam bentuk COLRv1+woff2.
Kasus penggunaan font berwarna
Judul menarik
Font warna baru dapat menonjolkan sorotan visual, judul, dan banner.
Tidak ada lagi penggantian gambar: font emoji
Jika Anda mendukung konten buatan pengguna, pengguna mungkin menggunakan emoji. Saat ini, sangat umum untuk memindai teks dan mengganti emoji yang ditemui dengan gambar guna memastikan rendering lintas platform yang konsisten dan kemampuan untuk mendukung emoji yang lebih baru daripada yang didukung oleh OS. Gambar tersebut kemudian harus dialihkan kembali menjadi teks selama operasi {i>clipboard<i}. Berikut ini adalah contoh nyata:
Jika Anda memiliki font emoji, Anda hanya perlu merender teks dalam font, seperti ini:
<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>
Demikian pula, dalam komponen reaksi emoji, COLRv1 menawarkan kesempatan untuk menggunakan file font ringkas, bukan katalog aset gambar.
Bayangkan berapa banyak gambar yang harus Anda ambil untuk pemilih emoji lengkap.
Warna pada font ikon
Penggunaan warna dalam font ikon akan menambah kejelasan dan membuat glyph lebih mudah dipahami.
Ekspresi artistik
Font warna yang hemat ruang memungkinkan bentuk baru ekspresi artistik dalam teks di web. Contoh font Arab bergaya Kufi ini menggunakan gradien warna sebagai penafsiran artistik tentang seperti apa aliran tinta kaligrafi tradisional jika diterapkan pada gaya Kufi tulisan Arab, yang berasal dari tidak ditulis dengan ujung pena dan tinta tetapi diukir di batu.
Deteksi fitur
Saat ini, mencari tahu apakah mesin browser mendukung format font warna tertentu dapat dilakukan dengan sniffing agen pengguna atau dengan menelusuri di library seperti ChromaCheck oleh @PixelAmbacht untuk menguji rendering glyph warna di Canvas. Kedua solusi tersebut tidak optimal. Pengujian fitur hanya boleh mendeteksi fitur tertentu itu sendiri dan menghindari penyadapan (sniffing) agen pengguna. Library ChromaCheck tidak perlu melakukan operasi kanvas 2D yang menggunakan resource secara intensif untuk menentukan dukungan.
Tim Chrome ingin memperbaikinya dan telah memulai serangkaian diskusi [1, 2] di kelompok kerja CSS untuk memberikan informasi tentang dukungan teknologi font browser di JavaScript dan secara deklaratif di CSS. Tim berencana merilis deteksi fitur yang efisien untuk font warna dan teknologi font lainnya dalam versi Chrome mendatang.
Jika Anda ingin menggunakan font warna dalam project saat ini saat dukungan COLRv1 terbatas untuk Chrome, ada dua cara yang dapat Anda lakukan: Minta vendor font Anda untuk memberikan font COLRv1 yang berisi glyph monokrom juga. Agen pengguna yang tidak mendukung COLRv1 akan kembali ke rendering glyph monokrom. Atau, Anda dapat menggunakan library ChromaCheck atau sniffing agen pengguna untuk menentukan apakah dukungan COLRv1 tersedia atau tidak. Kemudian, Anda mengirimkan CSS yang memuat font COLRv1 dalam agen pengguna pendukung dan menggunakan format font alternatif seperti COLRv0, format font bitmap, atau OpenType SVG di browser lain.
Dukungan palet font CSS
Akan sangat berguna jika penggunaan kumpulan warna berbeda tidak memerlukan font baru. Untungnya, ada mekanismenya: properti CSS font-palette. Tim Chrome sedang berupaya menambahkan dukungan untuk palet font di Chrome.
Font COLRv1 & Anda
Jika font COLRv1 menarik minat Anda, tanyakan kepada vendor font Anda tentang font warna COLRv1 yang akan digunakan dalam project Anda, coba contoh dan demo di atas, atau mengapa tidak mempelajarinya dan bereksperimen dengan membuat font Anda sendiri?
Jika Anda memiliki masukan terkait COLRv1 di Chrome, posting ke milis blink-dev, atau laporkan masalah di issue tracker kami. Jika Anda memiliki masukan tentang format font COLRv1, laporkan masalah di repositori GitHub spesifikasi COLRv1.
Dengan Chrome 98, kami antusias dengan bagaimana COLRv1 menghadirkan tingkat kreativitas tipografi yang benar-benar baru ke web.
Pelajari lebih lanjut
Jika Anda tertarik untuk mengetahui detail selengkapnya, kami memiliki beberapa referensi lainnya untuk Anda:
Untuk mempelajari cara kerja COLRv1 dan cara penerapannya di Chrome, lihat ceramah konferensi BlinkOn 15 Dominik.
- Konferensi Unicode Internasional #45: Font Warna Vektor, pembicaraan oleh Roderick Sheeter, Peter Constable, dan Dominik Röttsches (video, detail pembicaraan)
- Compiler font nanoemoji, yang menghasilkan font COLRv1 dari gambar SVG
- Repositori GitHub font warna Google Fonts yang berisi build saat ini dari Noto Emoji, Twemoji, dan contoh font lainnya
- Pameran font Bradley Initials dari DJR, yang menjelajahi COLRv1
- Alat dan library Chrome Check untuk mendeteksi teknologi font warna yang tersedia
Ucapan terima kasih
Terima kasih banyak kepada 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 Rv1 atas kontribusi mereka.