फ़ॉन्ट

फ़ॉन्ट फ़ील्ड आपके द्वारा मास्टर ऐडऑन के साथ बनाए गए कस्टम विजेट में एक फ़ॉन्ट परिवार ड्रॉपडाउन जोड़ता है विजेट बिल्डरसंपादक एलिमेंटर में एक सिस्टम फ़ॉन्ट या एक गूगल फ़ॉन्ट चुनते हैं, और विजेट इसे आपके द्वारा चुने गए तत्व पर लागू करता है यह केवल टाइपफेस बदलता है आकार, वजन और लाइन ऊंचाई आपके सीएसएस में रहते हैं।

फ़ॉन्ट उन क्षेत्रों में से एक है जिन्हें आप मुफ्त संस्करण के विजेट बिल्डर में उपयोग कर सकते हैं मुफ्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.

फ़ॉन्ट फ़ील्ड क्या करता है #

• एलिमेंटर में आपके विजेट के पैनल में एक खोज योग्य ड्रॉपडाउन जोड़ता है सूची में एक है चूक विकल्प, ए सिस्टम समूह (एरियल, ताहोमा और इतने पर) और एक गूगल समूह।
• उदाहरण के लिए, परिवार का नाम पाठ के रूप में सहेजता है Playfair Display.
• लिखता है ए font-family उन तत्वों के लिए नियम जिन्हें आप नीचे सूचीबद्ध करते हैं सीएसएस चयनकर्ताओं। जब पिक एक Google फ़ॉन्ट है, तो एलिमेंटर आपके लिए उस फ़ॉन्ट को पृष्ठ पर लोड करता है।
• आपको एक टोकन भी देता है, जैसे {{ quote_font }}, वह परिवार का नाम प्रिंट करता है।

बिल्डर के लिए नया? पढ़ें विजेट बिल्डर अवलोकन सबसे पहले, फिर एक विजेट खुला के साथ वापस आओ।

इससे पहले कि आप शुरू करें #

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर के लिए मास्टर ऐडऑन स्थापित और सक्रिय हैं। द स्थापना गाइड सेटअप को कवर करता है।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक “पुल कोटेमैग् विजेट है: एक टेक्सटेरिया नामित quote_text, एक टेक्स्ट फ़ील्ड नामित quote_authorऔर एक फ़ॉन्ट फ़ील्ड का नाम दिया गया है quote_font यह उद्धरण का टाइपफेस सेट करता है।

फ़ॉन्ट फ़ील्ड कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. क्लिक करें शैली टैब करें और एक अनुभाग जोड़ें, उदाहरण के लिए “Quote Style”।
3. प्रकार font बाईं ओर फ़ील्ड खोज बॉक्स में।
4. खींचना फ़ॉन्ट अनुभाग में इसकी सेटिंग्स खोलने के लिए मैदान पर पेंसिल पर क्लिक करें।

शैली वह जगह है जहां संपादक टाइपफेस विकल्प खोजने की उम्मीद करते हैं, लेकिन फ़ील्ड सामग्री या उन्नत अनुभाग में भी काम करती है।

फ़ॉन्ट फ़ील्ड विकल्पों की व्याख्या की गई #

• लेबलः एलिमेंटर में ड्रॉपडाउन के ऊपर का पाठ, उदाहरण के लिए “Quote Font”।
• नाम: क्षेत्र की विशिष्ट आईडी और इसके टोकन का नाम उदाहरण के लिए, केवल अक्षरों, संख्याओं और अंडरस्कोर का उपयोग करें quote_font.
• विवरण: एलिमेंटर में ड्रॉपडाउन के तहत दिखाया गया एक संकेत।
• डिफ़ॉल्ट मानः परिवार विजेट की एक नई प्रति के साथ शुरू होता है नाम ठीक उसी तरह टाइप करें जैसे यह एलिमेंट की सूची में दिखाई देता है, उदाहरण के लिए Playfair Display.

सामान्य सेटिंग्स के अंतर्गत आप पाएंगे लेबल दिखाएँ, लेबल ब्लॉक, विभाजक और शर्तोंहै, जो अन्य क्षेत्रों के समान ही काम करते हैं इस क्षेत्र को काम करने वाली सेटिंग है सीएसएस चयनकर्ताओं.

सीएसएस चयनकर्ताओं के साथ फ़ॉन्ट लागू करें #

तक नीचे स्क्रॉल करें सीएसएस चयनकर्ताओं और क्लिक करें आइटम जोड़ेंप्रत्येक पंक्ति में दो बॉक्स हैंः

• सीएसएस चयनकर्ताः वह तत्व जो फ़ॉन्ट प्राप्त करता है पुल उद्धरण के लिए यह है .pq-quote। आपको टाइप करने की आवश्यकता नहीं है {{WRAPPER}}ू िक बिल्डर आपके िलए जोड़ता है और इस विजेट के अंदर काय म रखता है।
• सीएसएस गुणः लिखने का नियम। {{VALUE}} चुने हुए परिवार के साथ बदल दिया जाता है।

font-family: "{{VALUE}}", Georgia, serif;

एक नई पंक्ति उदाहरण पाठ से भरी हुई आती है, .text-1, .text-2 और color: {{VALUE}};दोनों को बदलें यदि आप छोड़ देते हैं color गुण बॉक्स में, फ़ॉन्ट नाम रंग मान के रूप में समाप्त होता है और टाइपफेस नहीं बदलता है।

आसपास के उद्धरण {{VALUE}} प्लेफेयर डिस्प्ले जैसे रिक्त स्थान वाले नाम कार्यशील रखें। Georgia, serif फ़ॉन्ट लोड होने पर फ़ॉलबैक है अधिक तत्वों को स्टाइल करने के लिए, आइटम जोड़ें पर फिर से क्लिक करें और एक और पंक्ति जोड़ें।

मैदान छोड़ दें चयनकर्ता नीचे बॉक्स खाली हमारे परीक्षणों में यह लिखा था color: Lora; इस फ़ील्ड के लिए, जो फ़ॉन्ट सेट नहीं करता है।

क्लिक करें सेटिंग्स सहेजें जब आपका काम पूरा हो जाए।

टोकन को सीएसएस पैनल में क्यों नहीं रखा? #

टोकन वहां काम करता है। font-family: "{{ quote_font }}", Georgia, serif; सही नाम प्रिंट करता है समस्या लोड हो रही है हमारे परीक्षणों में, केवल टोकन के माध्यम से उपयोग किया जाने वाला एक गूगल फ़ॉन्ट सामने के छोर पर लोड नहीं किया गया था, इसलिए आगंतुकों ने फ़ॉलबैक फ़ॉन्ट देखा एक सीएसएस चयनकर्ता पंक्ति एलिमेंट को फ़ॉन्ट लोड करने के लिए आवश्यक जानकारी देती है, और वही पिक सही ढंग से आई।

टोकन को उन स्थानों के लिए रखें जहां आपको टेक्स्ट के रूप में नाम की आवश्यकता है, जैसे कि HTML में क्लास या लेबल।

एलिमेंटर में फ़ॉन्ट नियंत्रण का उपयोग करें #

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

एक परिवार और पूर्वावलोकन अद्यतन चुनें प्रकाशित पृष्ठ पर, एलिमेंटर विजेट की शैलियों के साथ Google फ़ॉन्ट लोड करता है।

चुनना चूक पिक को साफ़ करता है विजेट फिर उस फ़ॉन्ट पर वापस गिर जाता है जो भी आपके सीएसएस पैनल या थीम उस तत्व के लिए सेट करता है, इसलिए तत्व को सीएसएस पैनल में एक समझदार फ़ॉन्ट दें।

सामान्य उपयोग के मामले #

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

फ़ॉन्ट क्षेत्र के साथ काम करने के लिए युक्तियाँ #

• स्टाइलिंग के लिए टोकन के बजाय सीएसएस चयनकर्ताओं का उपयोग करें। यही कारण है कि गूगल फ़ॉन्ट्स लोड बनाता है।
• हमेशा फ़ॉलबैक स्टैक जोड़ें बाद {{VALUE}}, जैसे कि Georgia, serif या Arial, sans-serif.
• सीएसएस पैनल में आकार और वजन डालें। फ़ॉन्ट फ़ील्ड केवल परिवार को सेट करता है।
• आकार, वजन और रिक्ति नियंत्रण की भी आवश्यकता है? द टाइपोग्राफी क्षेत्र एक प्रो फ़ील्ड है जो उन सभी को बंडल करता है।
• प्रत्येक Google फ़ॉन्ट एक डाउनलोड जोड़ता है। प्रति पृष्ठ दो या तीन परिवार एक उचित सीमा है।

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

फ़ॉन्ट फ़ील्ड को स्टाइल अनुभाग में जोड़ें, एक डिफ़ॉल्ट परिवार सेट करें, और एक सीएसएस चयनकर्ता पंक्ति जोड़ें जो इंगित करती है font-family: "{{VALUE}}" आपके तत्व पर संपादकों को एलिमेंटर में एक खोज योग्य फ़ॉन्ट सूची मिलती है, और अतिरिक्त कोड के बिना पृष्ठ पर गूगल फ़ॉन्ट लोड होता है पूर्ण पाठ स्टाइल के लिए, देखें टाइपोग्राफी क्षेत्र, और जाँच करें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।