चर वेब फोंट

You Gotta Love Frontend Conference को शुरू हुए एक सप्ताह से अधिक समय बीत चुका है, लेकिन उठाए गए कई मुद्दों पर चलते हुए बहुत देर नहीं हुई है। मुझे लगता है कि यह मेरे लिए रुचि के विषयों पर लेखों की एक श्रृंखला होगी, मुझे आशा है, आप की तरह। यह पोस्ट वैरिएबल फॉन्ट्स के लेखों का अनुवाद है, जिसके इस्तेमाल से ली वेरो ने भाषणों की श्रृंखला "सीएसएस सीक्रेट्स" में कई तरकीबें दिखाईं। यह देखते हुए कि यह पहली बार मैंने चर फोंट के बारे में सुना था, ट्रिक्स के बारे में बात करना जल्दबाजी है :)

वैरिएबल फोंट वेब प्रिंटिंग का भविष्य हैं, जो स्क्रीन पर पाठ के प्रदर्शन (आकार, बोल्डनेस, स्टाइल) को नियंत्रित करने के लिए कई विकल्प प्रदान करते हैं। और यह सब एक अपेक्षाकृत छोटे फ़ाइल आकार के साथ है। यह इस बारे में अंतहीन बहस को अलविदा कहने का समय है कि आपको अपनी सामग्री को नए, सुंदर जीवन जीने के लिए कितने फोंट से जोड़ने की जरूरत है।

एक उदाहरण के रूप में, पाठ (चित्रों में) आउटपुट सैंस वैरिएबल फ़ॉन्ट का उपयोग करता है, जिसे दो अक्षों (वजन और बेवल) के साथ कॉन्फ़िगर किया जा सकता है। मूल लेख में 18 अलग-अलग फ़ॉन्ट शैलियों का उपयोग किया गया है, सभी 57 KB आकार की एक ही फ़ॉन्ट फ़ाइल में हैं। वास्तव में, वेब फ़ॉन्ट के बाद से हर टाइपोग्राफी उत्साही के लिए चर फ़ॉन्ट एक नई प्रचार सुविधा है। वर्ष के अंत तक, चर फोंट सभी प्रमुख ब्राउज़रों द्वारा समर्थित होंगे, और 2019 की शुरुआत में, हम ऐसे फोंट का उपयोग स्थैतिक फोंट के विकल्प के रूप में करेंगे। वे काम करते हैं, और आप उनके साथ क्या कर सकते हैं?

परिचय

मेरे शोध के हिस्से के रूप में, मुझे चर फोंट के लिए सबसे सरल स्पष्टीकरण मिला। एक चर फ़ॉन्ट एक फ़ाइल में संग्रहीत किया जाता है, लेकिन यह विभिन्न फ़ाइलों में संग्रहीत कई अलग-अलग फ़ॉन्ट को बदल सकता है । परंपरागत रूप से, फ़ॉन्ट के प्रत्येक वजन (वसा सामग्री) या शैली (इटैलिक, बोल्ड, लाइट) के लिए, आपको कई उपयुक्त फोंट, फाइलें डाउनलोड करने की आवश्यकता होती है। ओपन टाइप चर फ़ॉन्ट फ़ाइल के साथ, आप किसी भी ग्रेडेशन (दानेदार, उदाहरण के लिए वजन = 100 या 101 और इतने पर) के साथ कई अलग-अलग फ़ॉन्ट विविधताएं उत्पन्न कर सकते हैं।

चर फ़ॉन्ट में अधिक कुल्हाड़ी हो सकती है। यह उदाहरण दो अक्षों को दर्शाता है - चौड़ाई और वजन।

छोटे फ़ाइल आकार को इस तथ्य के कारण हासिल किया जाता है कि प्रत्येक चरित्र में केवल एक ही रूपरेखा है। समोच्च बनाने वाले बिंदुओं में निर्देशों की एक श्रृंखला होती है जो उनके व्यवहार और एक विशेष शैली के गठन को निर्धारित करते हैं। इंटरपोलेशन सीधे ब्राउज़र में गतिशील रूप से होता है। सितंबर 2016 में, OpenType Font विविधता सार्वजनिक रूप से घोषित की गई और Adobe, Apple, Google और Microsoft द्वारा संयुक्त रूप से विकसित की गई। जाहिर है, इस तरह के सहयोग ने चर फोंट को त्वरित कार्यान्वयन के लिए कुछ प्रोत्साहन दिया है।

संभावनाएं

यह हमेशा फॉन्ट पर निर्भर करता है। फ़ॉन्ट में हेरफेर करने के लिए डिजाइनर एक या दूसरे अक्ष के साथ उपलब्ध हैं। फिलहाल 5 आरक्षित कुल्हाड़ी हैं जिन्हें गतिशील रूप से बदला जा सकता है: wdth - चौड़ाई, भार - ital - italics, slnt - bevel, opsz - ऑप्टिकल आकार।

अधिकांश फोंट वजन और चौड़ाई की कुल्हाड़ियों प्रदान करते हैं, ऐसा लगता है कि वे सबसे लोकप्रिय हैं। लेकिन कोई कस्टम कुल्हाड़ी भी हो सकती है। उदाहरण के लिए सेरिफ़ (सेरिफ़) या निचले और ऊपरी मामले के गुण।

क्या वास्तव में हमें कई अलग-अलग शैलियों की आवश्यकता है?

आइए हम खुद को रोकें और पूछें, हमें अलग-अलग फ़ॉन्ट शैलियों की आवश्यकता क्यों है? टाइपोग्राफी डिजाइन के माध्यम से शब्दों को अर्थ देती है, जिसका अर्थ है कि एक अच्छी टाइपोग्राफी सामग्री का समर्थन कर सकती है, एक खराब (या अनुचित) टाइपोग्राफी खराब कर सकती है। पाठ को एक ही फ़ॉन्ट के विभिन्न शैलियों के साथ स्वरूपित किया जा सकता है। उदाहरण के लिए, बोल्ड टेक्स्ट, किसी महत्वपूर्ण चीज़ पर प्रकाश डालता है। और कुछ महत्वपूर्ण बाहर खड़ा नहीं होगा यदि फ़ॉन्ट नीरस है और सब कुछ समान दिखता है। बेशक, आप रंग का उपयोग कर सकते हैं, उदाहरण के लिए, लेकिन यह पूरी तरह से अलग कहानी है। गिफ्ट किए गए डिजाइनरों को बिलबोर्ड पर BIG और BOLD TEXT ऑफ रेड पसंद है।

बेशक, विभिन्न शैलियाँ पाठ में शीर्षकों, उद्धरणों और अन्य कलाकृतियों पर भी लागू होती हैं, न कि केवल शब्दों के चयन के लिए।

कस्टम कुल्हाड़ियों का उपयोग करने का एक उदाहरण:

चर फोंट का उपयोग कैसे करें?

एक उपलब्ध चर फ़ॉन्ट का पता लगाएं

यह तकनीक काफी नई है, इसलिए इससे पहले कि आप वैरिएबल फोंट का उपयोग करना शुरू करें, आपको पहले उन्हें ढूंढना होगा :) खोज करने के लिए एक शानदार स्थान v-fonts.com है । यहां आप विभिन्न चर फ़ॉन्ट का एक गुच्छा पा सकते हैं, उनके साथ खेल सकते हैं और डाउनलोड कर सकते हैं। साथ ही फोंट की एक सूची यहां पाई जा सकती है।

अपनी शैलियों में फोंट को एकीकृत करें

ब्राउज़र का समर्थन पहले से ही बहुत अच्छा है, लगभग 65%। सभी हाल के ब्राउज़र मूल रूप से चर फोंट का समर्थन करते हैं। फ़ायरफ़ॉक्स ध्वज का समर्थन करता है।

एक पूरे के रूप में एक चर फ़ॉन्ट एकीकृत करना बहुत सरल है। आप '@ फॉन्ट-फेस' का उपयोग करके ऐसा करते हैं

@font-face { font-family: 'Venn'; src: url('Venn.woff2') format('woff2-variations'), /* will be the standard and works in Safari now */ url('Venn.woff2') format('woff2'); /* for the other supporting browsers */ } 

पता करें कि कौन सी कुल्हाड़ी फ़ॉन्ट का समर्थन करती है

प्रत्येक फ़ॉन्ट के पास समर्थित अक्षों का अपना सेट हो सकता है। यदि आप अपने फ़ॉन्ट की क्षमताओं को नहीं जानते हैं, तो आप Roel Nieskens के अद्भुत उपकरण का उपयोग कर सकते हैं। बस अपने फ़ॉन्ट को वहां खींचें। वहां आप फ़ॉन्ट के लिए उत्पन्न सीएसएस शैली की प्रतिलिपि बना सकते हैं और इसे अपनी परियोजना में उपयोग कर सकते हैं।

स्टाइलिंग चर फ़ॉन्ट

• font-weight - वजन, केवल 1 से 999 तक होता है।
• font-stretch - स्ट्रेचिंग, एक प्रतिशत लेता है। 100% - डिफ़ॉल्ट, 50% संपीड़ित, 200% दृढ़ता से फैला। नाम बहुत स्पष्ट नहीं है, क्योंकि वास्तव में यह चौड़ाई है।
• font-style - शैली, -90 से 90 तक ढलान लेती है। font-style: italic अभी भी काम करेगी। वैसे, ज्यादातर फोंट आमतौर पर 8 डिग्री तक की ढलान को लागू करते हैं।
• font-optical-sizing एक नई संपत्ति है जो auto या none स्वीकार करता है। डिफ़ॉल्ट रूप से, ब्राउज़र संपत्ति को auto सेट करेगा।

सभी फोंट इन सुविधाओं का समर्थन नहीं करेंगे, और सभी ब्राउज़र इस समय उनका समर्थन नहीं करते हैं।

आप उदाहरण के लिए, font-variation-settings का उपयोग करके निम्न-स्तरीय गुणों को भी बदल सकते हैं:

 p { font-family: "Venn"; font-variation-settings: "wght" 550, "wdth" 125; } 

आप उसी प्रभाव को प्राप्त कर सकते हैं:

 p { font-family: "Venn"; font-weight: 550; font-stretch: 125%; } 

और निश्चित रूप से, फ़ॉन्ट किसी भी कस्टम गुण का समर्थन कर सकता है जो आपके पास एक ही font-variation-* माध्यम font-variation-* :

 h1 { font-family: 'Decovar Alpha VF', sans-serif; font-variation-settings: "TRMC" 0, "SKLA" 0, "SKLB" 0, "TRME" 0; } 

उपयोगी लिंक:

• यहां आप वैरिएबल फोंट के साथ खेल सकते हैं ।
• अनुकूलन संभावनाओं के डेमो के रूप में एनिमेटेड काका

पी.सी. मैंने लंबे समय तक अनुवाद नहीं किया, मुझे लगता है कि यह अभ्यास का विषय है। यदि आपको कोई गलतियाँ या गलतियाँ नज़र आती हैं, तो मुझे पीएम को लिखें। टिप्पणी करने के लिए टिप्पणी छोड़ दें

अपडेट: धन्यवाद @ gt8on, कुछ लिंक को सही किया
अपडेट : धन्यवाद मिसिसोल , अनुवाद को सही किया :)