परिवर्तनीय फोंट का उपयोग करने के लिए 4 कदम

Sep 16, 2025
कैसे करना है
Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.
(छवि क्रेडिट: भविष्य) [1 9]

परिवर्तनीय फोंट फ़ॉन्ट डिजाइनरों को फ़ॉन्ट के भीतर टाइप विविधताओं को परिभाषित करने के लिए सक्षम करते हैं, एक फ़ॉन्ट फ़ाइल को कई फ़ॉन्ट्स की तरह कार्य करने में सक्षम बनाता है। मानक फ़ॉन्ट्स को फ़ॉन्ट परिवारों में समूहीकृत किया जाता है जिनमें कई अलग-अलग फ़ॉन्ट फाइलें होती हैं, प्रत्येक एक अलग शैली का प्रतिनिधित्व करती है, उदाहरण के लिए एक हल्का वजन या बोल्ड वजन। परिवर्तनीय फ़ॉन्ट्स में एक ही फ़ॉन्ट फ़ाइल में यह सब जानकारी होती है।

स्रोत सैन्स प्रो का उपयोग उदाहरण के रूप में, फ़ॉन्ट का परिवर्तनीय संस्करण लगभग 3 9 4 केबी योग करता है और विभिन्न प्रकार के वजन में आता है। यदि हम व्यक्तिगत रूप से मानक फ़ॉन्ट फ़ाइलों के रूप में इन फ़ॉन्ट वजन का उपयोग करना चाहते थे, तो वे औसतन 234 केबी हैं - जिसके परिणामस्वरूप लगभग 1856 केबी का संयुक्त फ़ाइल आकार होता है। बेशक, यह गणना मानती है कि सभी फ़ॉन्ट वजन एक मानक फ़ॉन्ट के रूप में व्यक्तिगत रूप से मौजूद हैं, जो वे नहीं करते हैं। (हालांकि यदि आप केवल नियमित फोंट की तलाश में हैं, तो हमारी पोस्ट देखें बेस्ट फ्री फ़ॉन्ट्स उपलब्ध।)

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

[3 9]

फ़ॉन्ट स्रोत SANS प्रो के मानक और परिवर्तनीय संस्करण के बीच फ़ॉन्ट वजन की एक श्रृंखला की एक तुलना (छवि क्रेडिट: मैंडी माइकल) [1 9]

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

परिवर्तनीय फोंट क्या अधिक रोमांचक बनाता है कि डिजाइनर केवल एक अक्ष तक सीमित नहीं हैं। परिवर्तनीय फोंट में विभिन्न शैलियों की एक श्रृंखला का प्रतिनिधित्व करने वाली कई अलग-अलग अक्ष हो सकते हैं। इसमें संघनित, इटालिक, ऑप्टिकल आकार या अन्य रचनात्मक या कस्टम विकल्प शामिल हो सकते हैं।

एक नई वेबसाइट पर अपने फोंट रखना चाहते हैं? वेब डिज़ाइन संसाधनों के लिए, हमारे सर्वश्रेष्ठ पर जाएं वेबसाइट निर्माता राउंडअप और शीर्ष का चयन वेब होस्टिंग सेवाएं। या भंडारण अपग्रेड के लिए, इन्हें देखें घन संग्रहण विकल्प।

01. परिवर्तनीय फोंट में अक्ष को समझें

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right.

एक वजन और चौड़ाई अक्ष में एक चर फ़ॉन्ट के इंटरपोलेशन को देखते हुए अनुकूलन की सीमा को प्रकट करता है जो उपलब्ध है (छवि क्रेडिट: मैंडी माइकल) [1 9]

हमारे सीएसएस में परिवर्तनीय फोंट का उपयोग करना बहुत ही समान है कि हम सामान्य रूप से वेब पर फ़ॉन्ट्स का उपयोग कैसे करेंगे: का उपयोग कर @ फ़ॉन्ट-फेस एट-नियम । हालांकि, हमें पहले परिवर्तनीय फ़ॉन्ट के अंदर विभिन्न प्रकार के अक्षों को समझने की आवश्यकता होती है क्योंकि यह निर्धारित करता है कि कौन से सीएसएस गुण हम उपयोग करते हैं।

एक चर फ़ॉन्ट में दो प्रकार के कुल्हाड़ी हैं: एक पंजीकृत धुरी और एक कस्टम धुरी। एक पंजीकृत धुरी एक अक्ष को संदर्भित करता है जो आम है कि यह मानकीकरण के लायक था। वर्तमान में पांच पंजीकृत अक्ष हैं; वजन, चौड़ाई, पतला, इटालिक और ऑप्टिकल आकार और इन्हें अक्सर मौजूदा सीएसएस गुणों, जैसे फ़ॉन्ट-वजन में मैप किया जाता है।

कस्टम अक्ष को टाइपफेस डिजाइनर द्वारा परिभाषित किया जाता है, किसी भी प्रकार की भिन्नता हो सकती है और केवल फ़ॉन्ट फ़ाइल के भीतर चार-अक्षर पहचानकर्ता की आवश्यकता होती है, जिसे सीएसएस में संदर्भित किया जा सकता है।

02. एक पंजीकृत धुरी का उपयोग करें

A range of variable font weights along an axis from light (200) to black (900).

वजन विविधताओं को एक अक्ष पर, प्रकाश (200) से काला (900) तक परिभाषित किया जाता है (छवि क्रेडिट: मैंडी माइकल) [1 9]

जब एक पंजीकृत धुरी की बात आती है, तो हम यह सुनिश्चित करना चाहते हैं कि हम किसी भी संबंधित सीएसएस गुणों का उपयोग कर रहे हैं, उदाहरण के लिए, फ़ॉन्ट-वजन या फ़ॉन्ट-शैली।

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

 @ फ़ॉन्ट-फेस {
फ़ॉन्ट-परिवार: "स्रोत सैन्स चर";
एसआरसी: यूआरएल ("स्रोत-संन-वैरिएबल। woff") प्रारूप ("woff-variations");
फ़ॉन्ट-वजन: 200 700;
}

इस उदाहरण में, हमने 200 से 700 का फ़ॉन्ट वजन निर्धारित किया है। एक बार हमारी सीमा को परिभाषित करने के बाद, हम उस सीमा के भीतर हमारे फ़ॉन्ट वजन के रूप में किसी भी संख्या का चयन कर सकते हैं, उदाहरण के लिए 658. महत्वपूर्ण यदि आप अपना फ़ॉन्ट वजन 200 से 700 तक सेट करते हैं और फिर 900 के वजन को परिभाषित करने का प्रयास करें, भले ही फ़ॉन्ट में अपने धुरी में 900 वजन परिभाषित किया गया हो, तो भी आप इसका उपयोग नहीं कर पाएंगे। रेंज परिभाषित करती है कि आपके सीएसएस में आपके पास क्या पहुंच है।

03. कस्टम अक्ष सेट करें

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

 एच 1 {
फ़ॉन्ट-परिवार: 'मेरा चर फ़ॉन्ट';
फ़ॉन्ट-विविधता-सेटिंग्स: 'WGHT' 375, 'Inli' 88;
}

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

पुराने ब्राउज़र में समर्थन सुनिश्चित करने के लिए, हम सीएसएस फीचर डिटेक्शन का उपयोग करके असमर्थित ब्राउज़र के लिए फ़ॉलबैक फोंट का उपयोग कर सकते हैं। 

 एच 1 {
  फ़ॉन्ट-परिवार: "स्रोत सैन्स", सैन्स-सेरिफ़;
  फ़ॉन्ट-वजन: 700;
}

@supports (फ़ॉन्ट-विविधता-सेटिंग्स: सामान्य) {
H1 {
 फ़ॉन्ट-परिवार: "डिकोवर";
 फ़ॉन्ट-विविधता-सेटिंग्स: "Inli" 88;
 }
}

फ़ॉन्ट-विविधता-सेटिंग्स समर्थन की जांच करके, हम सीएसएस ब्लॉक का समर्थन के अंदर हमारी परिवर्तनीय फ़ॉन्ट शैलियों को शामिल कर सकते हैं, यह सुनिश्चित करने के लिए कि वे केवल उन ब्राउज़रों में उपयोग किए जाएंगे जो वेरिएबल फोंट का समर्थन कर सकते हैं - असमर्थित ब्राउज़र में उपयोग किए जाने वाले हमारे मानक फ़ॉन्ट्स के साथ।

04. जावास्क्रिप्ट और परिवर्तनीय फ़ॉन्ट्स को मिलाएं

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts.

परिवर्तनीय फोंट आसानी से एक पतले वजन के लिए चिकनी संक्रमण सक्षम करते हैं; यह आपको जावास्क्रिप्ट वैरिएबल का उपयोग करने वाले चिकनी परिवर्तन करने की अनुमति देता है (छवि क्रेडिट: मैंडी माइकल) [1 9]

हम उन परिस्थितियों के लिए जावास्क्रिप्ट घटनाओं का उपयोग कर सकते हैं जहां हम अधिक ठीक-ट्यून किए गए नियंत्रण चाहते हैं या उन घटनाओं के आधार पर फ़ॉन्ट को बदलने के लिए जो हम अकेले सीएसएस के साथ नहीं पहुंच सकते हैं। एक साधारण उदाहरण हमारे फ़ॉन्ट वजन को हमारे व्यूपोर्ट के आकार में मिलान करेगा - क्योंकि व्यूपोर्ट छोटा हो जाता है, फ़ॉन्ट वजन भारी हो जाता है।

द्रव पैमाने बनाने के लिए, हमें मूल्यों और इकाइयों के दो सेटों को संरेखित करना होगा - फ़ॉन्ट वजन और व्यूपोर्ट आकार। हम विंडो का उपयोग कर वर्तमान व्यूपोर्ट चौड़ाई तक पहुंच सकते हैं .NNERWIDTH और इसे 0-0.99 की सीमा में परिवर्तित करके एक नया प्रतिशत-आधारित पैमाने बना सकते हैं। न्यूनतम और अधिकतम व्यूपोर्ट आकारों को शामिल करके हम प्रभाव की सीमा को नियंत्रित कर सकते हैं। 

 var viewportscale =
(window.innerwidth - minwindowsize) / (maxwindowesize - minwindowesize);

फिर हम अपने व्यूपोर्ट आकार के आधार पर फ़ॉन्ट वजन निर्धारित करते हैं। 

 var fontweightscale = viewportscale * (minfontweight - maxfontweight) + मैक्सफोंटवेट;

सीएसएस कस्टम गुणों का उपयोग करके, हम अपने सीएसएस में फ़ॉन्ट वजन को अद्यतन करने के लिए हमारे जावास्क्रिप्ट मान का उपयोग कर सकते हैं। 

 p.style.setproperty ("- वजन", FontweightScale);

जब यह एक फ़ंक्शन में जोड़ा जाता है और आकार बदलने वाले ईवेंट श्रोता से जुड़ा होता है, तो हम विंडो के नए आकार के आधार पर फ़ॉन्ट वजन अपडेट कर सकते हैं।

इस मूल दृष्टिकोण के साथ, हम सभी प्रकार की घटनाओं और अनुभवों के आधार पर हमारी टाइपोग्राफी को संशोधित करने में सक्षम हैं। जहां व्यूपोर्ट चौड़ा है, हम अधिक विस्तार कर सकते हैं; इसके विपरीत, जब यह छोटा होता है और अधिक सीमित स्थान में, हम फ़ॉन्ट चौड़ाई को कम करने या वजन बढ़ाने या वैधता, उपयोगिता और डिजाइन के मामले में हमारी सामग्री और टाइपोग्राफी का बेहतर नियंत्रण प्रदान कर सकते हैं।

आप ऐसा कर सकते हैं कोड देखें इसके लिए कोडपेन पर।

यह लेख मूल रूप से 318 के अंक में प्रकाशित किया गया था जाल , वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका। [1 9 3] यहां नेट की सदस्यता लें

।

जेनरेट सीएसएस पर परिवर्तनीय फोंट के बारे में अधिक खोजें

[20 9] An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September.

(छवि क्रेडिट: गेट्टी / बियांका बेरिंग / भविष्य) [1 9]

जेनरेट सीएसएस में अपनी बात में, 26 सितंबर 2019 को रिच मिक्स, लंदन, बियांका बीरिंग में वेब डिजाइनरों के लिए केंद्रित सीएसएस सम्मेलन का पता लगाएगा कि पारंपरिक मीडिया के साथ-साथ नए, इमर्सिव के भीतर लिखित शब्द के लिए परिवर्तनीय फोंट कैसे परिवर्तनीय फोंट बना सकते हैं अनुभव, जैसे एआर, वीआर, और मिश्रित वास्तविकता।

यदि आप इसे और अन्य महान वार्ता पकड़ना चाहते हैं, तो अब आपके टिकटों को तोड़ने लायक है। यदि आप 15 अगस्त को 5 पीएम यूटीसी से पहले अपना लेते हैं, तो आप £ 50 बचा सकते हैं, केवल £ 199 + वैट का भुगतान कर सकते हैं। अब अपना टिकट खरीदें !

संबंधित आलेख:

  • 3 तरीके तकनीक बदल रही है
  • सीएसएस में परिवर्तनीय फोंट के साथ शुरू करें
  • परिवर्तनीय फोंट के साथ अपने प्रकार को ऑनलाइन बदलें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Chiaroscuro कला: एक चरण-दर-चरण गाइड

कैसे करना है Sep 16, 2025

Chiaroscuro कला बनाना गहराई बनाने के लिए प्रकाश और छाया की संरचना का उपयोग करने क..

बेहतर हाथ खींचने के लिए नकारात्मक स्थान का उपयोग करें

कैसे करना है Sep 16, 2025

यहां तक ​​कि एक प्रतीत होता है कि एक हाथ खींचने जै�..

How to mount your artwork

कैसे करना है Sep 16, 2025

एक अच्छी तरह से निष्पादित माउंट सिर्फ एक से अधिक �..

Paint a classic fairy tale scene with Procreate

कैसे करना है Sep 16, 2025

Procreate जल्दी से मेरे गो-टू डिजिटल पेंटिंग ऐप बन गया ह�..

How to master creature anatomy

कैसे करना है Sep 16, 2025

जब यह आता है विश्वसनीय जीवों को चित्रित करना ..

जावास्क्रिप्ट के साथ सीएसएस कक्षाओं का प्रबंधन कैसे करें

कैसे करना है Sep 16, 2025

जब उपयोगकर्ता इंटरैक्शन शामिल होते हैं, तो सरल वे..

क्लिप स्टूडियो पेंट में कस्टम ब्रश बनाएं

कैसे करना है Sep 16, 2025

क्लिप स्टूडियो पेंट की हर पहली बार स्थापना में सजावट subtool की एक उत्साहित अ�..

Prep your work for 3D printing: 8 top tips

कैसे करना है Sep 16, 2025

3 डी प्रिंटिंग बेहद लोकप्रिय हो गई है। यदि आप अपना खुद का प्रिंट करना शुरू ..

श्रेणियाँ