कॉम्पैक्ट, कंप्रेस किए जा सकने वाले, कलर वेक्टर फ़ॉन्ट, जिनमें आपके सभी पसंदीदा ग्रेडिएंट फ़्लेवर मौजूद हैं.
Chrome 98 में, Chrome और फ़ॉन्ट टीम ने COLRv1 के लिए सहायता जोड़ी है. यह COLRv0 फ़ॉन्ट फ़ॉर्मैट का एक बेहतर वर्शन है. इसका मकसद, ग्रेडिएंट, कंपोजिट करने, और ब्लेंड करने की सुविधा जोड़कर, कलर फ़ॉन्ट को ज़्यादा से ज़्यादा लोगों तक पहुंचाना है. साथ ही, बेहतर आंतरिक आकार का फिर से इस्तेमाल करने की सुविधा जोड़कर, बेहतर और छोटी फ़ॉन्ट फ़ाइलों को अच्छी तरह से कंप्रेस करना है.
अभी कलर करें
वेब पर, टेक्स्ट को आम तौर पर CSS में बताए गए रंग में बनाया जाता है. फ़ॉन्ट से किसी खास रंग का पता नहीं चलता. इससे सिर्फ़ यह पता चलता है कि पिक्सल कहां डाले जाने चाहिए. आम तौर पर, यह एक अच्छी बात होती है. सीएसएस की मदद से, लेखक अपनी पसंद के मुताबिक रंग चुन सकता है. हालांकि, कभी-कभी एक ग्लिफ़ में कई रंग होते हैं जिनका एक साथ मतलब होता है. उदाहरण के लिए, हल्के नीले, गुलाबी, और सफ़ेद रंग की धारियों वाला यह फ़्लैग 
, मौजूदा टेक्स्ट कलर में होने पर वैसा ही नहीं दिखेगा.
फ़िलहाल, ज़्यादातर उपयोगकर्ताओं को इमोजी ही रंगीन फ़ॉन्ट के तौर पर दिखते हैं. आम तौर पर, इमोजी वेब पर सिस्टम इमोजी फ़ॉन्ट या इमेज डालकर दिखते हैं. हालांकि, इमेज डालने में कुछ समस्याएं आ सकती हैं, 
. खास तौर पर, बिटमैप पर आधारित कलर फ़ॉन्ट के लिए फ़ाइल का साइज़ बड़ा होने पर, इमोजी के लिए वेब फ़ॉन्ट का इस्तेमाल करना मुश्किल हो जाता है. COLRv1 के साथ काम करके, हमें उम्मीद है कि वेब पर और इसके बाहर भी क्रिएटिव कलर फ़ॉन्ट के इस्तेमाल में बढ़ोतरी होगी.
मुझे अपने रंग दिखाओ
हमने आपके लिए कुछ उदाहरण बनाए हैं, ताकि आप उन्हें आज़मा सकें:
इस उदाहरण में इस्तेमाल किए गए Google Fonts की एसेट, Google Fonts Web API में लाइव हैं. ये fonts.google.com की डायरेक्ट्री में शामिल नहीं हैं, क्योंकि ये सिर्फ़ Chrome 98 या इसके बाद के वर्शन पर काम करेंगे. साथ ही, ये एक्सपेरिमेंट के तौर पर उपलब्ध हैं.
अब मुफ़्त और ओपन-सोर्स टूल का इस्तेमाल करके, COLRv1 फ़ॉन्ट बनाए जा सकते हैं. nanoemoji फ़ॉन्ट कंपाइलर देखें. इसकी मदद से, SVG सोर्स इमेज से COLRv1 फ़ॉन्ट बनाए जा सकते हैं. इसके बाद, उन्हें Chrome 98 या उसके बाद के वर्शन में आज़माएं. इन निर्देशों का इस्तेमाल करके, ग्रेडिएंट के रंग बदलकर, बंजी स्पाइस को अपने हिसाब से बनाएं.
उदाहरण के लिए, नीले और लाल ग्रेडिएंट के लिए बंजी स्पाइस के फ़ॉन्ट में कुछ इस तरह से बदलाव किया जा सकता है:
अपने नतीजे @googlefonts को ट्वीट करें 🙂 रेडियल या स्वीप ग्रेडिएंट आज़माएं.
COLRv1 के साथ नई सुविधा
फ़ॉन्ट फ़ॉर्मैट में, कलर को कई तरीकों से इस्तेमाल किया जा सकता है. हालांकि, वेब पर अब तक इनमें से कोई भी तरीका काम नहीं आया है. (इसके फ़ायदों और नुकसानों के बारे में ज़्यादा जानने के लिए, Dominik के BlinkOn 15 कॉन्फ़्रेंस के भाषण को देखें.) Chrome 98 में COLRv1 का इस्तेमाल किया जा सकता है. यह COLRv0 का बेहतर वर्शन है. हमें उम्मीद है कि COLRv1 के ग्राफ़िक की सुविधाओं और कॉम्पैक्ट फ़ाइलों के कॉम्बिनेशन की वजह से, यह कई कलर फ़ॉन्ट के इस्तेमाल के उदाहरणों के लिए एक अच्छा विकल्प होगा. COLRv1, ग्रेडिएंट, कंपोज़िटिंग, और ब्लेंडिंग जोड़ता है. साथ ही, ज़्यादा कॉम्पैक्ट फ़ाइलों को बनाने के लिए, आंतरिक आकार के फिर से इस्तेमाल को बेहतर बनाता है.
COLRv1 में SVG Native की तरह ही साफ़ तौर पर दिखाने की क्षमता होती है. साथ ही, इसके ऊपर ब्लेंडिंग और कंपोज़िटिंग जोड़ी गई है. कलर फ़िल चार तरह के होते हैं: सॉलिड कलर, लीनियर ग्रेडिएंट, रेडियल ग्रेडिएंट, और स्वीप/शांकव ग्रेडिएंट. COLRv1 की मदद से, ट्रांसलेट, रोटेट, शीर, और स्केल ट्रांसफ़ॉर्मेशन के पूरे सेट का इस्तेमाल करके, ग्लिफ़ एलिमेंट को फिर से पोज़िशन किया जा सकता है और उनमें बदलाव किया जा सकता है. साथ ही, इसमें फ़ॉन्ट के वैरिएशन के साथ काम करने की सुविधा भी है. साथ ही, फ़ॉन्ट में मौजूद आकार की परिभाषा के मौजूदा फ़ॉर्मैट का फिर से इस्तेमाल किया जाता है.
उदाहरण के लिए, क्रिस्टल बॉल इमोजी पर विचार करें: स्टार के आकार वाली हाइलाइट एक ही आकार की होती हैं, लेकिन अलग-अलग साइज़ की होती हैं. इसका मतलब है कि फ़ाइल में डुप्लीकेट के बिना, सिर्फ़ एक आकार को फिर से सेट किया जा सकता है और उसका फिर से इस्तेमाल किया जा सकता है. इस फ़ॉर्मैट की मदद से, एक नए ग्लिफ़ में पूरे ग्लिफ़ का फिर से इस्तेमाल किया जा सकता है. इसके लिए, आपको हर ग्लिफ़ के लिए एक जैसे आकार को बार-बार कोड में बदलने की ज़रूरत नहीं है. फूलों से सजाए गए रंगीन फ़ॉन्ट की कल्पना करें. इसमें मौजूदा कलर ग्लिफ़ का रेफ़रंस देकर, एक जैसे फूलों के आकार को अलग-अलग अक्षरों पर रखा गया है. वेब फ़ॉन्ट के इस्तेमाल के उदाहरण के लिए, COLRv1 को woff2 में अच्छी तरह से कंप्रेस किया जा सकता है. उदाहरण के लिए, COLRv1 का इस्तेमाल करके Twemoji का टेस्ट बिल्ड, फ़्लोरेट होने पर करीब 1.2 एमबी का होता है. हालांकि, woff2 फ़ॉर्मैट में यह करीब 0.6 एमबी का होता है. पूरे Noto इमोजी ग्लिफ़ सेट के बिटमैप वर्शन का साइज़ 9 एमबी से घटाकर, COLRv1+woff2 फ़ॉर्मैट में 1.85 एमबी कर दिया गया है.
कलर फ़ॉन्ट के इस्तेमाल के उदाहरण
दिलचस्प हेडलाइन
नए रंग के फ़ॉन्ट से विज़ुअल हाइलाइट, हेडलाइन, और बैनर अलग दिखते हैं.
इमेज बदलने की सुविधा बंद हो गई: इमोजी फ़ॉन्ट
अगर आपके ऐप्लिकेशन में यूज़र जनरेटेड कॉन्टेंट की सुविधा है, तो हो सकता है कि आपके उपयोगकर्ता इमोजी का इस्तेमाल करें. आज के समय में, टेक्स्ट को स्कैन करना और किसी भी इमोजी को इमेज से बदलना बहुत आम है. इससे, अलग-अलग प्लैटफ़ॉर्म पर रेंडरिंग को एक जैसा रखने और ओएस के साथ काम करने वाले नए इमोजी का इस्तेमाल करने की सुविधा मिलती है. इसके बाद, क्लिपबोर्ड से इमेज को टेक्स्ट में बदलना पड़ता है. यहां एक असली उदाहरण दिया गया है:
अगर आपके पास इमोजी फ़ॉन्ट है, तो टेक्स्ट को फ़ॉन्ट में रेंडर करें. जैसे:
<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>
इसी तरह, इमोजी वाले प्रतिक्रिया कॉम्पोनेंट में, COLRv1 का इस्तेमाल करके, इमेज ऐसेट के कैटलॉग के बजाय, कॉम्पैक्ट फ़ॉन्ट फ़ाइल का इस्तेमाल किया जा सकता है.
सोचें कि इमोजी पिकर के लिए आपको कितनी इमेज फ़ेच करनी होंगी!
आइकॉन के फ़ॉन्ट में रंग
आइकॉन फ़ॉन्ट में रंग का इस्तेमाल करने से, आइकॉन को साफ़ तौर पर देखा जा सकता है. साथ ही, ग्लिफ़ को आसानी से समझा जा सकता है.
कलात्मकता
रंग-बिरंगे फ़ॉन्ट की मदद से, टेक्स्ट को टेक्स्ट में दिखाने के लिए, वेब पर नए-नए क्रिएटिव फ़ॉन्ट जोड़े जा सकते हैं. कूफ़ी शैली के ऐरेबिक फ़ॉन्ट के इस उदाहरण में, पारंपरिक कैलीग्राफ़ी की इंक फ़्लो को अरबी लेखन की कूफ़ी शैली में लागू करने पर, वह कलात्मक व्याख्या के तौर पर कलन से मिलती-जुलती है.
सुविधा की पहचान
फ़िलहाल, उपयोगकर्ता एजेंट को स्निफ़ करके या @PixelAmbacht की ChromaCheck जैसी लाइब्रेरी में खोज करके यह पता लगाया जा सकता है कि कोई ब्राउज़र इंजन किसी खास कलर फ़ॉन्ट फ़ॉर्मैट के साथ काम करता है या नहीं. ऐसा, कैनवस पर कलर ग्लिफ़ को रेंडर करने की जांच करने के लिए किया जाता है. दोनों समाधान सही नहीं हैं. सुविधा की जांच करने वाले टूल को सिर्फ़ किसी एक सुविधा का पता लगाना चाहिए. साथ ही, उपयोगकर्ता एजेंट स्निफिंग से बचना चाहिए. ChromaCheck लाइब्रेरी को, सहायता उपलब्ध होने का पता लगाने के लिए, ज़्यादा संसाधनों वाले 2D कैनवस ऑपरेशन करने की ज़रूरत नहीं होनी चाहिए.
Chrome की टीम इस पर काम कर रही है. इसके लिए, उसने सीएसएस वर्किंग ग्रुप में कई बातचीत शुरू की हैं [1, 2]. इनसे, JavaScript और सीएसएस में ब्राउज़र फ़ॉन्ट टेक्नोलॉजी के इस्तेमाल के बारे में जानकारी मिलेगी. टीम, Chrome के आने वाले वर्शन में रंगीन फ़ॉन्ट और फ़ॉन्ट की अन्य टेक्नोलॉजी के लिए, सुविधा का बेहतर तरीके से पता लगाने की सुविधा रिलीज़ करने की योजना बना रही है.
अगर आपको अभी अपने प्रोजेक्ट में कलर फ़ॉन्ट का इस्तेमाल करना है, तो COLRv1 के साथ काम करने वाले फ़ॉन्ट का इस्तेमाल करें. फ़िलहाल, यह सुविधा सिर्फ़ Chrome पर काम करती है. ऐसा करने के दो तरीके हैं: अपने फ़ॉन्ट वेंडर से COLRv1 फ़ॉन्ट के लिए कहें. इसमें मोनोक्रोम ग्लिफ़ भी शामिल होने चाहिए. जो उपयोगकर्ता एजेंट COLRv1 के साथ काम नहीं करते वे मोनोक्रोम ग्लिफ़ को रेंडर करेंगे. इसके अलावा, आप ChromaCheck लाइब्रेरी या उपयोगकर्ता एजेंट स्निफ़िंग का इस्तेमाल करके यह पता लगा सकते हैं कि COLRv1 सहायता उपलब्ध है या नहीं. इसके बाद, ऐसी सीएसएस डिलीवर करें जो काम करने वाले उपयोगकर्ता एजेंट में COLRv1 फ़ॉन्ट लोड करती है. साथ ही, अन्य ब्राउज़र में COLRv0, बिटमैप फ़ॉन्ट फ़ॉर्मैट या OpenType SVG जैसे किसी अन्य फ़ॉन्ट फ़ॉर्मैट का इस्तेमाल करती है.
सीएसएस फ़ॉन्ट-पैलेट सहायता
अगर रंगों के अलग सेट का इस्तेमाल करने के लिए नए फ़ॉन्ट की ज़रूरत नहीं है, तो यह बहुत ज़्यादा मददगार होगा. शुक्र है कि एक तरीका मौजूद है: font-palette CSS प्रॉपर्टी. Chrome टीम, Chrome में फ़ॉन्ट-पैलेट की सुविधा जोड़ने पर काम कर रही है.
COLRv1 फ़ॉन्ट और आप
अगर COLRv1 फ़ॉन्ट में आपकी दिलचस्पी है, तो अपने फ़ॉन्ट वेंडर से अपने प्रोजेक्ट में इस्तेमाल करने के लिए COLRv1 कलर फ़ॉन्ट के बारे में पूछें. इसके अलावा, ऊपर दिए गए उदाहरण और डेमो आज़माएं. इसके अलावा, खुद का फ़ॉन्ट बनाकर भी प्रयोग किया जा सकता है.
अगर आपको Chrome में COLRv1 के बारे में कोई सुझाव/राय देनी है या कोई शिकायत करनी है, तो blink-dev मेलिंग सूची पर पोस्ट करें या हमारे समस्या ट्रैकर में समस्या दर्ज करें. अगर आपको COLRv1 फ़ॉन्ट फ़ॉर्मैट के बारे में सुझाव/राय देनी है या शिकायत करनी है, तो COLRv1 स्पेसिफ़िकेशन के GitHub डेटा स्टोर पर जाएं.
हमें खुशी है कि Chrome 98 में COLRv1, वेब पर टाइपोग्राफ़ी की क्रिएटिविटी को एक नए लेवल पर ले जाएगा.
ज़्यादा जानें
अगर आपको ज़्यादा जानकारी चाहिए, तो हमारे पास आपके लिए कुछ और संसाधन हैं:
COLRv1 के काम करने के तरीके और इसे Chrome में लागू करने के तरीके के बारे में जानने के लिए, डॉमिनिक का BlinkOn 15 कॉन्फ़्रेंस टॉक देखें.
- इंटरनैशनल यूनिकोड कॉन्फ़्रेंस #45: वेक्टर कलर फ़ॉन्ट, रॉडरिक की ओर से टॉक शीटर, पीटर कॉन्स्टेबल, और डोमिनिक रॉट्सचेस (वीडियो, टॉक की जानकारी)
- नैनोमोजी फ़ॉन्ट कंपाइलर, SVG इमेज से COLRv1 फ़ॉन्ट बना रहा है
- Google Fonts में color-fonts GitHub रिपॉज़िटरी में नोटो इमोजी, ट्वीमोजी, और दूसरे सैंपल फ़ॉन्ट के मौजूदा बिल्ड शामिल हैं
- डीजेआर का ब्रैडली इनिशियल फ़ॉन्ट का शोकेस, जिसमें COLRv1 को एक्सप्लोर किया गया है
- ChromaCheck टूल और लाइब्रेरी की मदद से, उपलब्ध कलर फ़ॉन्ट टेक्नोलॉजी की पहचान की जा सकती है
धन्यवाद
COLRv1 में योगदान देने के लिए, 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, और अन्य लोगों का बहुत-बहुत धन्यवाद.