जावास्क्रिप्ट फ़ॉन्ट परिवार सूची

Michael Zippo

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

यह वह जगह है जहां सीएसएस फ़ॉन्ट स्थित है: परिवार खेल में आता है। CSS फॉन्ट-फ़ैमिली प्रॉपर्टी आपको एक या अधिक फ़ॉन्ट फ़ैमिली निर्दिष्ट करने की अनुमति देती है जिनका उपयोग वेब पेज पर टेक्स्ट को स्टाइल करने के लिए किया जाएगा।

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

एक पर टेक्स्ट द्वारा उपयोग किए जाने वाले फ़ॉन्ट परिवार को परिभाषित करें वेब पेज, आप फ़ॉन्ट-पारिवारिक संपत्ति का उपयोग कर सकते हैं। फ़ॉन्ट-फ़ैमिली प्रॉपर्टी का सिंटैक्स इस प्रकार है:

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

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

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

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

आप दो तरीकों का उपयोग कर सकते हैं फ़ॉन्ट-पारिवारिक संपत्ति। सबसे पहले, आप वेब पेज के लिए एक कस्टम फ़ॉन्ट निर्दिष्ट करने के लिए संपत्ति का उपयोग कर सकते हैं। दूसरा, आप वेब पेज पर टेक्स्ट में सामान्य फ़ॉन्ट परिवार लागू करने के लिए संपत्ति का उपयोग कर सकते हैं। फ़ॉन्ट-पारिवारिक संपत्ति के साथ उपयोग के लिए उपलब्ध सामान्य फ़ॉन्ट परिवार इस प्रकार हैं:

सेरिफ़: फ़ॉन्ट सेरिफ़ फ़ॉन्ट का उपयोग करते हैं (जैसे ल्यूसिडा ब्राइट, पल्लाडियो)।
sans-serif: फ़ॉन्ट्स sans-serif फ़ॉन्ट (उदा. Open Sans, Trebuchet MS) का उपयोग करते हैं।
मोनोस्पेस: सभी वर्ण समान चौड़ाई वाले होते हैं (उदा. मिनीवैन, मेनलो)।
इटैलिक: पात्रों में एक हाइफ़न होता है (उदाहरण के लिए ल्यूसिडा सुलेख)।
फंतासी: फ़ॉन्ट पर ध्यान आकर्षित करने के लिए सजावटी फ़ॉन्ट्स (जैसे पेपिरस) का उपयोग किया जाता है।

वहां हैं अन्य सामान्य फ़ॉन्ट परिवार उपलब्ध हैं, जिन्हें आप Mozilla CSS Font Family Documentation ।

अब जब हम फ़ॉन्ट-फ़ैमिली प्रॉपर्टी की मूल बातें जानते हैं, तो हम कुछ उदाहरण देख सकते हैं कि यह कैसे काम करता है .

सीएसएस फ़ॉन्ट परिवारों के उदाहरण

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

सबसे पहले, हमें "ओपन सेन्स" का उपयोग करने के लिए सभी

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

क्लिक करें " नोस्क्रिप्ट> हमारे HTML / CSS कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन .
हमारे HTML कोड में, हमने

टैग का उपयोग करते हुए एक हेडर निर्दिष्ट किया है जिसमें टेक्स्ट `हमसे संपर्क करें` शामिल है। इसलिए हमारे CSS कोड में, हमने उपयोग किया हमारे वेबपेज पर

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

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

निष्कर्ष

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