वेब पेज पर टेक्स्ट को स्टाइल करना वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा है। उदाहरण के लिए, हो सकता है कि आप चाहते हैं कि हेडर एक विशिष्ट फ़ॉन्ट में, या पेज पर सभी टेक्स्ट serif का उपयोग करने के लिए दिखाई दें। फ़ॉन्ट।
यहीं पर CSS फॉन्ट-फ़ैमिली प्रॉपर्टी आती है। CSS फॉन्ट-फ़ैमिली प्रॉपर्टी आपको एक या अधिक फ़ॉन्ट फ़ैमिली निर्दिष्ट करने की अनुमति देती है जिसका उपयोग वेब पेज पर टेक्स्ट को स्टाइल करने के लिए किया जाएगा।
यह ट्यूटोरियल उदाहरणों के संदर्भ में, सीएसएस फ़ॉन्ट-पारिवारिक संपत्ति की मूल बातें, और आप वेब पेज पर टेक्स्ट को स्टाइल करने के लिए संपत्ति का उपयोग कैसे कर सकते हैं, इस पर चर्चा करेंगे।
सीएसएस फ़ॉन्ट परिवार
CSS में किसी फॉन्ट को स्टाइल करने से लेकर रंग सेट करने से लेकर फॉन्ट के आकार तक के कई पहलू शामिल हैं। हालाँकि, किसी फ़ॉन्ट को स्टाइल करने के सबसे महत्वपूर्ण भागों में से एक है, फ़ॉन्ट परिवार को सेट करना - वेब पेज पर टेक्स्ट द्वारा उपयोग की जाने वाली शैली।
वेब पेज पर टेक्स्ट द्वारा उपयोग किए जाने वाले फ़ॉन्ट परिवार को सेट करने के लिए, आप फ़ॉन्ट-पारिवारिक संपत्ति का उपयोग कर सकते हैं। फ़ॉन्ट-फ़ैमिली प्रॉपर्टी का सिंटैक्स इस प्रकार है:
font-family: fontFamilyOne, fontFamilyTwo, …;
फ़ॉन्ट-पारिवारिक संपत्ति या तो एक फ़ॉन्ट या फोंट की सूची स्वीकार करती है। यदि आप एक से अधिक फ़ॉन्ट निर्दिष्ट करते हैं, तो आपको प्रत्येक फ़ॉन्ट को अल्पविराम से अलग करना चाहिए।
जिस क्रम में फोंट दिखाई देते हैं वह वह क्रम है जिसमें ब्राउज़र फोंट को लागू करने का प्रयास करेगा। ब्राउज़र सूची में पहले फ़ॉन्ट का उपयोग करने के लिए डिफ़ॉल्ट होगा जो या तो स्थापित है या वेब ब्राउज़र द्वारा डाउनलोड किया जा सकता है। यदि वह फ़ॉन्ट उपलब्ध नहीं है, तो दूसरे फ़ॉन्ट का उपयोग किया जाएगा, इत्यादि।
यह ध्यान रखना महत्वपूर्ण है कि फ़ॉन्ट-पारिवारिक संपत्ति टेक्स्ट के एक ब्लॉक में प्रत्येक वर्ण के लिए एक फ़ॉन्ट का चयन करेगी। इसलिए, यदि कोई विशेष वर्ण एक फ़ॉन्ट में उपलब्ध नहीं है, तो आपकी फ़ॉन्ट परिवार सूची में अगला फ़ॉन्ट तब तक आज़माया जाएगा, जब तक कि उपयुक्त फ़ॉन्ट नहीं मिल जाता।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
जब आप फॉन्ट-वेट प्रॉपर्टी का उपयोग कर रहे हों, तो कम से कम एक सामान्य फ़ॉन्ट परिवार का नाम (जैसे सेरिफ़, सैन्स-सेरिफ़, या मोनोस्पेस) शामिल करना सबसे अच्छा है। यह सुनिश्चित करता है कि यदि आपकी सूची में कोई अन्य फ़ॉन्ट उपलब्ध नहीं है, तो ब्राउज़र अभी भी वेब पेज पर टेक्स्ट के लिए एक फ़ॉन्ट का चयन करने में सक्षम होगा।
आप दो तरीकों से फ़ॉन्ट-पारिवारिक संपत्ति का उपयोग कर सकते हैं। सबसे पहले, आप वेब पेज के लिए एक कस्टम फ़ॉन्ट निर्दिष्ट करने के लिए संपत्ति का उपयोग कर सकते हैं। दूसरा, आप वेब पेज पर टेक्स्ट में सामान्य फ़ॉन्ट परिवार लागू करने के लिए संपत्ति का उपयोग कर सकते हैं। फ़ॉन्ट-पारिवारिक संपत्ति के साथ उपयोग के लिए उपलब्ध सामान्य फ़ॉन्ट परिवार इस प्रकार हैं:
- सेरिफ़:वर्ण सेरिफ़ टाइपफेस का उपयोग करते हैं (उदा. ल्यूसिडा ब्राइट, पल्लाडियो)।
- सैंस-सेरिफ़:वर्ण बिना-सेरिफ़ टाइपफेस का उपयोग करते हैं (उदा. ओपन सेन्स, ट्रेबुचेट एमएस)।
- मोनोस्पेस:सभी वर्णों की चौड़ाई समान होती है (उदा. मोनोस्पेस, मेनलो)।
- कर्सिव:कैरेक्टर्स में जॉइनिंग स्ट्रोक होता है (जैसे ल्यूसिडा कैलीग्राफी)।
- फंतासी:पात्रों (यानी पेपिरस) पर ध्यान आकर्षित करने के लिए उपयोग किए जाने वाले सजावटी फ़ॉन्ट।
अन्य सामान्य फ़ॉन्ट परिवार उपलब्ध हैं, जिनके बारे में आप मोज़िला सीएसएस फ़ॉन्ट-फ़ैमिली दस्तावेज़ में अधिक गहराई से पढ़ सकते हैं।
अब जब हम फ़ॉन्ट-पारिवारिक संपत्ति की मूल बातें जानते हैं, तो हम कुछ उदाहरणों के माध्यम से चल सकते हैं कि यह कैसे काम करता है।
सीएसएस फ़ॉन्ट परिवार उदाहरण
हमें एक स्थानीय स्टाम्प क्लब, द सिएटल स्टैम्प क्लब द्वारा उनकी वेबसाइट पर कुछ भागों के फोंट को अनुकूलित करने के लिए कहा गया है।
सबसे पहले, हमें "ओपन सेन्स" फ़ॉन्ट का उपयोग करने के लिए उनके "संपर्क" पृष्ठ पर सभी
शीर्षकों के फ़ॉन्ट को बदलने के लिए कहा गया है। इसलिए, उदाहरण के लिए, उनकी वेबसाइट के "संपर्क" पृष्ठ पर "हमसे संपर्क करें" शीर्षक ओपन सेन्स में दिखाई देना चाहिए। यदि वह फ़ॉन्ट उपलब्ध नहीं है, तो सामान्य "सैंस-सेरिफ़" परिवार का उपयोग किया जाना चाहिए। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं: <html>
<h1>Contact Us</h1>
<style>
h1 {
font-family: "Open Sans", sans-serif;
}
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
हमारे HTML कोड में, हमने
टैग का उपयोग करके एक शीर्षक निर्दिष्ट किया है जिसमें टेक्स्ट Contact Us शामिल है . फिर, हमारे सीएसएस कोड में, हमने अपने वेब पेज पर तत्वों के फ़ॉन्ट को परिभाषित करने के लिए फ़ॉन्ट-फ़ैमिली का उपयोग किया है।
हमारे द्वारा फॉन्ट-फ़ैमिली प्रॉपर्टी को असाइन किया गया मान सभी
तत्वों के फ़ॉन्ट को Open Sans पर सेट करता है। , और यदि वह फ़ॉन्ट उपलब्ध नहीं है, तो सामान्य sans-serif परिवार का उपयोग किया जाता है। इसे पूरा करने के लिए, हमने अल्पविराम द्वारा अलग किए गए दो फोंट निर्दिष्ट किए।
अब, मान लीजिए कि हम स्टैम्प क्लब के Contact के सभी
तत्वों को भी स्टाइल करना चाहते हैं। टाइम्स फ़ॉन्ट का उपयोग करने के लिए पृष्ठ। यदि वह फ़ॉन्ट उपलब्ध नहीं है, तो एक डिफ़ॉल्ट सेरिफ़ फ़ॉन्ट का उपयोग किया जाना चाहिए। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:
<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p {
font-family: "Times", serif;
}
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
हमारे उदाहरण में, हमने
टैग का उपयोग करके टेक्स्ट का एक पैराग्राफ घोषित किया है। फिर, हम Times का उपयोग करने के लिए अपने सीएसएस स्टाइल शीट में सभी
टैग्स का फॉन्ट-फ़ैमिली सेट करते हैं। और serif फोंट्स। डिफ़ॉल्ट रूप से, ब्राउज़र सभी
टैग को Times . में रेंडर करने का प्रयास करेगा फ़ॉन्ट। यदि यह फ़ॉन्ट उपलब्ध नहीं है, तो serif फ़ॉन्ट का उपयोग किया जाता है।
निष्कर्ष
CSS फॉन्ट-फ़ैमिली प्रॉपर्टी आपको वेब पेज पर टेक्स्ट की शैली निर्दिष्ट करने की अनुमति देती है। उदाहरण के लिए, आप "एरियल" फ़ॉन्ट का उपयोग करने के लिए फ़ॉन्ट-पारिवारिक संपत्ति का उपयोग कर सकते हैं, या वेब पेज पर सभी टेक्स्ट के लिए "कर्सिव" जेनेरिक फ़ॉन्ट का उपयोग कर सकते हैं।
इस ट्यूटोरियल में उदाहरणों के संदर्भ में, CSS फॉन्ट-फ़ैमिली प्रॉपर्टी की मूल बातें और वेब पेज पर टेक्स्ट को स्टाइल करने के लिए आप इसका उपयोग कैसे कर सकते हैं, इस पर चर्चा की गई। अब आप एक मास्टर वेब डिज़ाइनर की तरह फ़ॉन्ट-फ़ैमिली प्रॉपर्टी का उपयोग शुरू करने के लिए तैयार हैं!