Font vektor warna yang ringkas, cocok untuk kompresi dengan semua font favorit Anda ragam gradien.
Di Chrome 98, tim Chrome dan Font telah menambahkan dukungan untuk COLRv1, evolusi format huruf COLRv0 yang dimaksudkan untuk membuat font berwarna tersebar luas menambahkan gradien, pengomposisian dan pencampuran, serta peningkatan penggunaan ulang bentuk internal untuk file {i>font<i} yang tajam dan ringkas yang dapat dikompresi dengan baik.
Warna sekarang
Di web, teks umumnya digambar dengan warna yang ditentukan dalam CSS. {i>Font<i} ini
tidak mendefinisikan warna tertentu, tapi hanya
menunjukkan di mana {i>pixel<i} seharusnya
ditempatkan. Itu adalah hal yang baik. CSS memungkinkan penulis memilih secara fleksibel
{i>color<i}. Namun, terkadang glyph berisi beberapa warna yang
artinya. Misalnya, tanda ini 
dengan garis berwarna biru muda, merah muda, dan putih tidak akan
menyampaikan makna 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 detailnya sendiri, 
). File besar
terutama untuk {i>font<i} warna berbasis bitmap telah menyulitkan penggunaan web
font untuk emoji. Dengan mendukung COLRv1, kami berharap melihat
font warna kreatif yang digunakan di web dan lainnya.
Tampilkan warnamu
Kami telah membuat beberapa contoh untuk Anda coba:
Contoh aset dari Google Fonts yang digunakan dalam contoh adalah tersedia di API web Google Fonts. Mereka adalah tidak tercantum dalam direktori di fonts.google.com sebagai kebijakan ini 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. Periksa compiler font nanoemoji yang memungkinkan Anda membangun font COLRv1 dari gambar sumber SVG, lalu mencobanya Chrome 98 atau yang lebih baru. Cobalah untuk berkreasi 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 banyak cara untuk mendukung warna, dengan berbagai untung-rugi - tetapi belum ada yang berhasil di web sejauh ini. (Untuk mempelajari lebih lanjut tentang konsekuensinya, lihatlah konferensi konferensi BlinkOn 15 Dominik.) Chrome 98 menghadirkan dukungan untuk COLRv1, evolusi dari COLRv0. Kami harap Kombinasi kemampuan grafis dan file ringkas COLRv1 akan membuatnya pilihan yang baik untuk berbagai kasus penggunaan {i>font<i} warna. COLRv1 menambahkan gradien, pengomposisian, dan pencampuran, serta meningkatkan penggunaan ulang bentuk internal untuk membuat file yang lebih ringkas.
COLRv1 memiliki kemampuan ekspresif yang kira-kira setara dengan Native SVG plus pencampuran dan pengomposisian ditambahkan pada atas. Ada empat jenis isian warna: warna solid, gradien linier, dan radial gradien, dan gradien sweep/conic. COLRv1 memungkinkan Anda mengubah posisi dan transformasi elemen glyph menggunakan set lengkap terjemahan, rotasi, transparan, dan skala transformasi. Selain itu, fitur ini juga mendukung variasi dan penggunaan ulang font format definisi bentuk yang ada dalam {i>font<i}.
Pikirkan emoji bola kristal sebagai contoh: Sorotan berbentuk bintang bentuk yang sama tetapi berbeda ukuran, yang berarti hanya satu bentuk bisa ditempatkan ulang dan digunakan kembali tanpa duplikasi di dalam file. Format ini memungkinkan Anda harus menggunakan kembali glyph penuh dalam glyph baru, tanpa harus mengenkode bentuk yang sama untuk setiap glyph. Bayangkan {i>font<i} 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 font web, COLRv1 mengkompres dengan baik di bawah woff2. Misalnya, build uji coba Twemoji menggunakan COLRv1 membutuhkan waktu sekitar 1,2 MB meningkat, tetapi sekitar 0,6MB dalam bentuk woff2. Sebuah build dari set Noto Emoji Glyph lengkap dikurangi dari 9MB untuk versi bitmap menjadi 1,85MB dalam bentuk COLRv1+woff2.
Kasus penggunaan font warna
Judul yang menarik
Font warna baru membuat sorotan visual, judul, dan banner menjadi sangat menarik posisi-posisi ini.
Tidak perlu lagi mengganti gambar: font emoji
Jika Anda mendukung konten buatan pengguna, pengguna Anda mungkin menggunakan emoji. Hari Ini Sangat umum untuk memindai teks dan mengganti emoji yang ditemukan dengan gambar untuk memastikan rendering lintas platform yang konsisten dan kemampuan untuk mendukung emoji daripada yang didukung OS. Gambar tersebut kemudian harus dialihkan kembali ke teks selama operasi papan klip. Berikut ini adalah contoh nyata:
Jika memiliki font emoji, Anda cukup 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 file {i>font<i} yang ringkas, bukan katalog aset gambar.
Bayangkan berapa banyak gambar yang harus Anda ambil untuk pemilih emoji yang lengkap.
Warnai font ikon
Menggunakan warna pada font ikon akan menambah kejelasan dan membuat glyph lebih mudah dipahami.
Ekspresi artistik
Font warna yang hemat ruang memungkinkan bentuk ekspresi artistik baru dalam teks di web. Contoh huruf Arab ala Kufi ini menggunakan gradasi warna sebagai interpretasi artistik tentang apa yang dapat dilakukan aliran tinta pada kaligrafi tradisional terlihat seperti ketika diterapkan pada gaya tulisan Arab Kufi, yang berasal dari tulisan yang tidak dibuat dengan pena dan tinta, melainkan diukir di batu.
Deteksi fitur
Saat ini, mencari tahu apakah mesin browser mendukung warna tertentu format font dimungkinkan dengan cara mengendus agen pengguna atau dengan mencari library seperti ChromaCheck oleh @PixelAmbacht untuk menguji rendering warna glyph di Canvas. Kedua solusi tersebut tidak optimal. Pengujian fitur seharusnya mendeteksi fitur tertentu saja dan menghindari penyadapan agen pengguna. ChromaCheck perpustakaan seharusnya tidak perlu melakukan operasi kanvas 2D yang membutuhkan banyak sumber daya untuk menentukan dukungan.
Tim Chrome ingin meningkatkan hal tersebut dan telah memulai serangkaian diskusi [1, 2] di kelompok kerja CSS untuk memberikan informasi tentang dukungan teknologi font browser dalam JavaScript dan secara deklaratif di CSS. Tim berencana merilis deteksi fitur yang efisien untuk {i>font<i} warna dan teknologi {i>font<i} lainnya di Chrome versi mendatang.
Jika Anda ingin menggunakan font warna dalam proyek Anda sekarang ketika COLRv1 dukungan terbatas untuk Chrome, ada dua cara untuk melakukannya: Minta font Anda vendor untuk {i>font<i} COLRv1 yang juga berisi glyph monokrom. Agen pengguna yang tidak mendukung COLRv1 akan kembali ke rendering monokrom glyph. Atau, Anda dapat menggunakan library atau agen pengguna ChromaCheck mengendus untuk menentukan apakah dukungan COLRv1 tersedia. Setelah itu, kirimkan CSS yang memuat font COLRv1 dalam mendukung agen pengguna dan menggunakan font alternatif seperti COLRv0, format font bitmap atau OpenType SVG di browser lain.
Dukungan palet font CSS
Akan sangat berguna jika menggunakan seperangkat warna yang berbeda tidak akan memerlukan {i>font<i} baru. Untungnya ada mekanisme: properti CSS font-palette. Tujuan 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 warna COLRv1 font yang akan digunakan dalam project Anda, coba contoh dan demo di atas, atau mengapa tidak terjun langsung dan bereksperimen dengan membuatnya sendiri?
Jika Anda memiliki masukan tentang COLRv1 di Chrome, posting ke milis blink-dev, atau laporkan masalah di issue tracker kami. Jika Anda memiliki masukan format font COLRv1 itu sendiri, ajukan masalah di Repositori GitHub spesifikasi COLRv1.
Dengan Chrome 98, kami senang dengan cara COLRv1 menghadirkan tingkat kreativitas tipografi ke web.
Pelajari lebih lanjut
Jika Anda tertarik untuk mengetahui detail lebih lanjut, kami memiliki beberapa referensi lainnya untuk Anda:
Untuk mempelajari bagaimana COLRv1 bekerja dan bagaimana mengimplementasikannya di Chrome, lihat diskusi konferensi BlinkOn 15 Dominik.
- International Unicode Conference #45: Vector Color Fonts, bicarakan oleh Roderick Sheeter, Peter Constable, dan Dominik Röttsches (video, detail pembicaraan)
- compiler font nanoemoji, yang menghasilkan Font COLRv1 dari gambar SVG
- Google Fonts repositori GitHub color-fonts yang berisi build saat ini dari Emoji Noto, Twemoji, dan font contoh lainnya
- Pameran font Bradley Initials oleh DJR, yang menjelajahi COLRv1
- Library dan alat ChromaCheck untuk deteksi fitur 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, dan orang lain atas kontribusi mereka untuk COLRv1.