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