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