फ़ॉन्ट

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

फ़ॉन्ट फ़ील्ड समर्थन करता है शर्तों, इसे प्रकट करने के लिए तभी उपयोगी है जब “कस्टम टाइपोग्राफी” टॉगल चालू हो, और इसका मान प्रिंट हो जाए ट्विग-सिंटैक्स टेम्पलेट इंजन अपने सीएसएस में। दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।

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

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

• विजेट के एलिमेंटर पैनल में एक फ़ॉन्ट परिवार ड्रॉपडाउन प्रदान करता है, सिस्टम फ़ॉन्ट और Google फ़ॉन्ट सूचीबद्ध करता है।
• उदाहरण के लिए, चुने हुए परिवार को एक सादे तार के रूप में संग्रहीत करता है Lora या Georgia.
• उस स्ट्रिंग को प्रिंट करता है {{ your_field_name }}, आम तौर पर अंदर ए font-family सीएसएस पैनल में नियम।
• बिल्कुल एक संपत्ति को नियंत्रित करता है आकार, वजन, रिक्ति, और बाकी आपकी स्टाइलशीट में या अलग-अलग नियंत्रण में रहते हैं।
• एक डिफ़ॉल्ट पारिवारिक नाम लेता है इसलिए विजेट एक जानबूझकर टाइपफेस के साथ आता है।

अभी तक विजेट नहीं बनाया है विजेट बिल्डर अवलोकन फ़ील्ड-स्तरीय दस्तावेज़ों से पहले शुरू करने का स्थान है।

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक फ़ॉन्ट फ़ील्ड नाम के साथ एक पुल-उद्धरण विजेट है quote_font यह केवल उद्धरण पाठ का टाइपफेस बदलता है।

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

खींचना फ़ॉन्ट फ़ील्ड पैनल से नीचे एक अनुभाग में फ़ील्ड करें शैली टैब, इसका प्राकृतिक घर, हालांकि कोई भी टैब काम करता है एक बार उतरने के बाद इसके विकल्प बाईं ओर खुलते हैं।

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

विकल्प सूची छोटी है, जो क्षेत्र का बिंदु हैः

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

अपने सीएसएस पैनल में फ़ॉन्ट फ़ील्ड कनेक्ट करें #

फ़ॉन्ट फ़ील्ड एक टोकन फ़ील्ड है, और सीएसएस पैनल वह जगह है जहां इसका टोकन संबंधित है एक के अंदर मूल्य प्रिंट करें font-family नियम और हमेशा फ़ॉलबैक स्टैक के साथ इसका पालन करेंः

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

टोकन चुने गए परिवार के नाम को प्रस्तुत करता है, इसलिए ऊपर दिया गया नियम बन जाता है font-family: Lora, Georgia, serif; जब कोई संपादक लोरा चुनता है। आकार और रेखा की ऊंचाई आपकी ही रहती है; नियंत्रण केवल टाइपफेस को स्वैप करता है।

टोकन HTML पैनल में भी काम करता है, उदाहरण के लिए एक सशर्त में जो एक विशिष्ट परिवार सक्रिय होने पर एक कक्षा को बदल देता है, लेकिन सीएसएस इसके लिए व्यावहारिक घर है।

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

जेएस पैनल में एक न्यूनतम लोडर इस तरह दिखता हैः

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

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

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

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

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

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

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

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

• हमेशा फ़ॉलबैक स्टैक लिखें। font-family: {{ quote_font }}, Georgia, serif; चुने गए फ़ॉन्ट को लोड नहीं करने पर विजेट को पठनीय रखता है।
• याद रखें कोई ऑटो-एनक्यू नहीं है। यहां चुने गए Google फ़ॉन्ट्स को विजेट में एक लोडर या एक साइट की आवश्यकता होती है जो उन्हें पहले से ही लोड करती है; वह फ़ील्ड की एक तेज़ धार है।
• जब आपको अधिक आवश्यकता हो तो टाइपोग्राफी के लिए पहुंचें। आकार, वजन, रिक्ति, उत्तरदायी मान और स्वचालित फ़ॉन्ट लोडिंग सभी संबंधित हैं टाइपोग्राफी क्षेत्र। फ़ॉन्ट केवल परिवार के मामले के लिए है।
• वास्तविक डिफ़ॉल्ट सेट करें। एक स्पष्ट आरंभिक परिवार जो भी विषय में आता है उसे विरासत में प्राप्त करने से बेहतर है।
• टोकन को सीएसएस में रखें। सीएसएस पैनल में एक नियम को HTML के माध्यम से बिखरी हुई इनलाइन शैली विशेषताओं की तुलना में बनाए रखना आसान है।
• यहां चयनकर्ता शॉर्टकट की अपेक्षा न करें। इस क्षेत्र के लिए प्राकृतिक तारों अपने खुद में टोकन है font-family शासन, जहां आप भी गिरावट को नियंत्रित करते हैं।

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

लपेटकर #

विजेट बिल्डर फ़ॉन्ट फ़ील्ड बहुत कम सतह के साथ एक काम करता है: पैनल में एक पारिवारिक ड्रॉपडाउन, आपके में एक स्ट्रिंग टोकन font-family नियम, और आपके हाथों में छोड़े गए फ़ॉलबैक का पूर्ण नियंत्रण। जब आप Google परिवारों की पेशकश करते हैं तो फ़ॉन्ट लोड करें, और आगे बढ़ें टाइपोग्राफी क्षेत्र जब एक विजेट को पूरा पाठ-स्टाइल पैनल की आवश्यकता होती है बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।