Font vektor warna yang ringkas dan mudah dikompresi dengan semua gradasi warna favorit Anda.
Di Chrome 98, tim Chrome dan Font telah menambahkan dukungan untuk COLRv1, evolusi format font COLRv0 yang dimaksudkan untuk membuat font warna tersebar luas dengan menambahkan gradien, komposisi, dan penggabungan, serta meningkatkan penggunaan kembali bentuk internal untuk file font yang tajam dan ringkas yang dikompresi dengan baik.
Warnai sekarang
Di web, teks biasanya digambar dengan warna yang ditentukan di CSS. Font tidak
menentukan warna tertentu, tetapi hanya menunjukkan tempat piksel harus
ditempatkan. Hal ini biasanya merupakan hal yang baik. CSS memungkinkan penulis memilih warna secara fleksibel. Namun, terkadang glyph berisi beberapa warna yang secara bersama-sama memiliki makna. Misalnya, bendera 
ini dengan garis 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 berwarna yang mereka lihat. Emoji
biasanya muncul di web melalui font emoji sistem, atau dengan menyisipkan gambar
(yang memiliki kerumitan tersendiri, 
). Ukuran file
yang besar, terutama untuk font warna berbasis bitmap, telah mempersulit penggunaan font
web untuk emoji. Dengan mendukung COLRv1, kami berharap dapat melihat proliferasi
penggunaan font warna kreatif di web dan sekitarnya.
Tunjukkan warna Anda
Kami telah membuat beberapa contoh untuk Anda gunakan:
Contoh aset dari Google Fonts yang digunakan dalam contoh ditayangkan di API web Google Fonts. Font tersebut tidak tercantum dalam direktori di fonts.google.com karena hanya akan berfungsi di Chrome 98 atau yang lebih baru dan menampilkan karya eksperimental.
Anda kini dapat membuat font COLRv1 sendiri menggunakan alat gratis dan open source. Lihat compiler font nanoemoji yang memungkinkan Anda mem-build font COLRv1 dari gambar sumber SVG, lalu coba di Chrome 98 atau yang lebih baru. Coba buat variasi Bungee Spice Anda sendiri dengan mengubah warna gradien menggunakan petunjuk ini.
Misalnya, Anda dapat mengubah font Bungee Spice agar memiliki gradien biru dan merah, seperti ini:
Tweet hasil Anda ke @googlefonts 🙂 Mengapa tidak mencoba gradien radial atau sapuan?
Baru dengan COLRv1
Format font mendukung beberapa cara untuk mendukung warna, semuanya dengan kompromi yang berbeda – tetapi sejauh ini belum ada yang berhasil di web. (Untuk mempelajari lebih lanjut kompromi ini, lihat presentasi konferensi BlinkOn 15 Dominik.) Chrome 98 menghadirkan dukungan untuk COLRv1, evolusi dari COLRv0. Kami harap kombinasi kemampuan grafis dan file ringkas COLRv1 akan menjadikannya pilihan yang baik untuk banyak kasus penggunaan font warna. COLRv1 menambahkan gradien, komposisi, dan penggabungan, serta meningkatkan penggunaan kembali bentuk internal untuk membuat file yang lebih ringkas.
COLRv1 memiliki kemampuan ekspresif yang kira-kira setara dengan SVG Native ditambah penggabungan dan komposisi yang ditambahkan di atasnya. Ada empat jenis isian warna: warna solid, gradien linear, gradien radial, dan gradien sapuan/konik. COLRv1 memungkinkan Anda memosisikan ulang dan mengubah elemen glyph menggunakan kumpulan lengkap transformasi terjemahan, rotasi, geser, dan penskalaan. Selain itu, fitur ini mendukung variasi font dan menggunakan kembali format definisi bentuk yang ada dalam font.
Sebagai contoh, pertimbangkan emoji bola kristal: Sorotan berbentuk bintang memiliki bentuk yang sama, tetapi ukurannya berbeda, 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 berlebihan 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 font web, COLRv1 dikompresi dengan baik di bawah woff2. Misalnya, build pengujian Twemoji menggunakan COLRv1 memerlukan sekitar 1,2 MB yang di-inflate, tetapi sekitar 0,6 MB dalam bentuk woff2. Build kumpulan Noto Emoji Glyph lengkap dikurangi dari 9 MB untuk versi bitmap menjadi 1,85 MB dalam bentuk COLRv1+woff2.
Kasus penggunaan font warna
Judul yang menarik
Font warna baru membuat sorotan visual, judul, dan banner benar-benar menarik perhatian.
Tidak ada lagi penggantian gambar: font emoji
Jika Anda mendukung konten buatan pengguna, pengguna Anda mungkin menggunakan emoji. Saat ini, skan teks dan ganti emoji yang ditemukan dengan gambar sangat umum dilakukan untuk memastikan rendering lintas platform yang konsisten dan kemampuan untuk mendukung emoji yang lebih baru daripada yang didukung OS. Gambar tersebut kemudian harus dialihkan kembali ke teks selama operasi papan klip. Berikut 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 peluang untuk menggunakan file font ringkas, bukan katalog aset gambar.
Bayangkan berapa banyak gambar yang harus Anda ambil untuk pemilih emoji yang lengkap.
Warna dalam 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 gaya Kufi ini menggunakan gradien warna sebagai interpretasi artistik tentang tampilan aliran tinta kaligrafi tradisional saat diterapkan pada gaya tulisan Arab Kufi, yang berasal dari tulisan yang tidak ditulis dengan nib dan tinta, tetapi diukir di batu.
Deteksi fitur
Saat ini, Anda dapat mengetahui apakah mesin browser mendukung format font warna tertentu dengan melakukan sniffing agen pengguna atau dengan menelusuri di library seperti ChromaCheck oleh @PixelAmbacht untuk menguji rendering glyph warna di Kanvas. Kedua solusi tersebut tidak optimal. Pengujian fitur hanya boleh mendeteksi fitur tertentu itu sendiri dan menghindari sniffing agen pengguna. Library ChromaCheck tidak perlu melakukan operasi kanvas 2D yang membutuhkan banyak resource untuk menentukan dukungan.
Tim Chrome ingin meningkatkannya dan telah memulai serangkaian diskusi [1, 2] di grup 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 di Chrome versi mendatang.
Jika Anda ingin menggunakan font warna dalam project saat ini saat dukungan COLRv1 terbatas untuk Chrome, ada dua cara untuk melakukannya: Minta font COLRv1 dari vendor font Anda yang juga berisi glyph monokrom. 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. Kemudian, Anda mengirimkan CSS yang memuat font COLRv1 dalam mendukung agen pengguna dan menggunakan format font alternatif seperti COLRv0, format font bitmap, atau OpenType SVG di browser lain.
Dukungan palet font CSS
Hal ini akan sangat berguna jika menggunakan kumpulan warna yang berbeda tidak memerlukan font baru. Untungnya, ada mekanisme: 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 langsung mencoba dan bereksperimen dengan membuat font Anda sendiri?
Jika Anda memiliki masukan tentang COLRv1 di Chrome, kirimkan ke milis blink-dev, atau laporkan masalah di issue tracker kami. Jika Anda memiliki masukan tentang format font COLRv1 itu sendiri, laporkan masalah di repositori GitHub spesifikasi COLRv1.
Dengan Chrome 98, kami sangat antusias dengan cara COLRv1 menghadirkan tingkat kreativitas tipografi yang baru ke web.
Pelajari lebih lanjut
Jika Anda tertarik dengan detail selengkapnya, kami memiliki beberapa referensi lainnya untuk Anda:
Untuk mempelajari cara kerja COLRv1 dan penerapannya di Chrome, lihat presentasi konferensi BlinkOn 15 dari Dominik.
- International Unicode Conference #45: Vector Color Fonts, presentasi oleh Roderick Sheeter, Peter Constable, dan Dominik Röttsches (video, detail presentasi)
- compiler font nanoemoji, yang menghasilkan font COLRv1 dari gambar SVG
- Repositori GitHub font warna Google Fonts yang berisi build Noto Emoji, Twemoji, dan font contoh lainnya saat ini
- Showcase DJR untuk font Bradley Initials, yang menjelajahi COLRv1
- Alat dan library ChromaCheck untuk mendeteksi 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 lainnya atas kontribusi mereka terhadap COLRv1.