यह लेख आपको एक सरल लेकिन एक महत्वपूर्ण विषय से परिचित कराएगा जो कि फॉन्ट इन है और आपको इस विषय पर एक व्यावहारिक प्रदर्शन भी देगा। इस लेख में निम्नलिखित बिंदुओं को शामिल किया जाएगा,
- सीएसएस में फ़ॉन्ट्स
- सीएसएस फ़ॉन्ट में विशेषताएँ
- फ़ॉन्ट-शैली विशेषता
- फ़ॉन्ट-वजन विशेषता
- फ़ॉन्ट-आकार विशेषता
- फ़ॉन्ट-पारिवारिक विशेषता
वेब साइट छवियों, ऑडियो, वीडियो और पाठ्य सामग्री के रूप में सामग्री ले जाती है। हालाँकि, अधिकांश वेब पेज अभी भी प्रमुख प्रारूप के रूप में पाठ पर निर्भर करते हैं। ऐसा इसलिए है क्योंकि सादा पाठ कुछ बहुत महत्वपूर्ण लाभ प्रदान करता है।
गैर-घुसपैठ की पठनीयता - आप कार्यालय में रहते हुए नवीनतम मैच स्कोर की जांच करना चाहते हैं। जाहिर है आप एक त्वरित पाठ अद्यतन चाहते हैं, न कि शोर वीडियो!
कम नेटवर्क बैंडविड्थ की आवश्यकता - पाठ सामग्री को गरीब इंटरनेट कनेक्टिविटी क्षेत्रों में भी लोड किया जा सकता है, जबकि अमीर मीडिया नहीं कर सकता।
खोज के अनुकूल - वेब साइट हमेशा इस बात पर नज़र रखती हैं कि खोज इंजन पर उनकी सामग्री कितनी आसानी से देखी जाती है। पाठ इसके लिए सबसे उपयुक्त है, कम से कम जब तक एआई पूरी तरह से इंटरनेट पर नहीं ले लेता है!
पाठ सामग्री को प्रारूपित करते समय, वेब डिज़ाइनरों के पास काम करने के लिए केवल कुछ पैरामीटर होते हैं - फ़ॉन्ट, संरेखण, हाइलाइटिंग और रंग। अपने पाठ के लिए सही फ़ॉन्ट का चयन एक महत्वपूर्ण विकल्प है। मानक अभ्यास HTML पृष्ठों में पाठ के लिए फ़ॉन्ट को परिभाषित करने के लिए सीएसएस फ़ॉन्ट टैग का उपयोग करना है।
यदि आप HTML प्रोग्रामिंग की दुनिया में नए हैं, तो यहां बुनियादी स्टार्टर टूर करें। आप सीएसएस फोंट के बारे में सीखने से पहले सीएसएस मूल बातें पर पढ़ना चाह सकते हैं।
एक व्यापक सीएसएस ट्यूटोरियल के लिए, शुरुआती के लिए एडुर्का सीएसएस ट्यूटोरियल देखें। HTML वेब डिज़ाइन को बढ़ाने के लिए CSS का उपयोग करने के तरीके पर आपको एक उत्कृष्ट हेड-अप मिलेगा।
CSS में फ़ॉन्ट्स पर इस लेख के साथ आगे बढ़ना
सीएसएस में फ़ॉन्ट्स
एक फ़ॉन्ट मूल रूप से पाठ के प्रदर्शन से जुड़ी विशेषताओं का एक समूह है। फोंट को उनके आकार, इंडेंटेशन, चौड़ाई, तिरछा और इसी तरह एक दूसरे से अलग किया जाता है। आइए विभिन्न फोंट में एक मूल पाठ प्रदर्शन के साथ शुरू करें।
उदाहरण 1: विभिन्न फोंट में हेडिंग और पैराग्राफ
body {पृष्ठभूमि-रंग: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {फ़ॉन्ट: italic bold 12px / 30px जॉर्जिया, सेरिफ़}इटैलिक बोल्ड जॉर्जिया फ़ॉन्ट में पैराग्राफ
उदाहरण 1: आउटपुट
उदाहरण 1 में, हमारे पास अलग-अलग फोंट में पाठ की 3 अलग-अलग लाइनें हैं। आप देखेंगे कि प्रत्येक फोंट उनके चरित्र की चौड़ाई, इंडेंटेशन आदि में भिन्न होता है।
CSS में फ़ॉन्ट्स पर इस लेख के साथ आगे बढ़ना
सीएसएस फ़ॉन्ट में विशेषताएँ
CSS फ़ॉन्ट्स में 4 प्राथमिक विशेषताएँ हैं - शैली, वजन, आकार और परिवार। शैली विशेषता सामान्य या इटैलिक को दर्शाती है। वजन फ़ॉन्ट को सादा या बोल्ड दिखाता है। वजन भी संख्यात्मक रूप से व्यक्त किया जा सकता है। आकार बस फ़ॉन्ट आकार बड़ा आकार है, दिखने में बड़ा पाठ। ऐसे कई तरीके हैं जिनमें फ़ॉन्ट आकार असाइन किया जा सकता है, विस्तृत विवरण बाद के खंडों में दिए गए हैं। परिवार की विशेषता पाठ को फ़ॉन्ट नाम निर्दिष्ट करना है।
उदाहरण 1 में, हमने शीर्षकों और पैराग्राफ के लिए विभिन्न फ़ॉन्ट नामों का उपयोग किया है। एच 1 और पी टैग के तहत, हम दो फ़ॉन्ट नामों को सूचीबद्ध देखते हैं, जबकि एच 2 टैग केवल एक फ़ॉन्ट को नाम देता है। यह एक फ़ॉन्ट परिवार की परिभाषा है, इस बारे में और बाद में।
CSS में फ़ॉन्ट्स पर इस लेख के साथ आगे बढ़ना
फ़ॉन्ट-शैली विशेषता:
दो प्राथमिक शैलियों को 'सामान्य' और 'इटैलिक' सेट किया जा सकता है। प्रकृति को एक तिरछा के साथ प्रकृति में घसीट माना जाता है। सामान्य डिफ़ॉल्ट विकल्प है जो सीधा है। एक और कम उपयोग किया जाने वाला विकल्प है जिसे 'तिरछा' कहा जाता है, जो अधिकांश फोंट में इटैलिक विकल्प जैसा दिखता है। आप शैली को 'वंशानुक्रम' पर भी सेट कर सकते हैं ताकि वह अपने मूल तत्व से फ़ॉन्ट शैली ले सके।
| उदाहरण 2: फ़ॉन्ट शैली विकल्प | |
font-family: verdanaगुंजाइश रिज़ॉल्यूशन ऑपरेटर c ++ फ़ॉन्ट-शैली: सामान्य फ़ॉन्ट-आकार: १५ | वर्दाना सामान्य फ़ॉन्ट |
| font-family: verdana फ़ॉन्ट-शैली: इटैलिक फ़ॉन्ट-आकार: १५ | वरदाना इटैलिक फॉन्ट |
| font-family: verdana फ़ॉन्ट-शैली: तिरछा sql सर्वर में पिवट और अनपिवेट फ़ॉन्ट-आकार: १५ | वरदाना तिरछा फ़ॉन्ट |
CSS में फ़ॉन्ट्स पर इस लेख के साथ आगे बढ़ना
फ़ॉन्ट-वजन विशेषता:
यह विशेषता तय करती है कि फॉन्ट मोटा या पतला दिखना चाहिए। इसे 'सामान्य' या 'बोल्ड' पर सेट किया जा सकता है। डिफ़ॉल्ट मान सामान्य है। यह मान संख्यात्मक के रूप में भी सेट किया जा सकता है। 400 का वजन सामान्य और 700 का प्रतिनिधित्व करता है। कुछ अन्य सेटिंग्स हैं (100 से लेकर - बहुत हल्के से 900 - बहुत बोल्ड), लेकिन वे सभी फोंट द्वारा समर्थित नहीं हैं। वजन के सभी विकल्प उदाहरण 3 में दिखाए गए हैं।
| उदाहरण 3: फ़ॉन्ट वजन विकल्प | |
| font-family: verdana फ़ॉन्ट-वजन: सामान्य फ़ॉन्ट-आकार: १५ | वर्दाना सामान्य वजन |
| font-family: verdana फोंट की मोटाई: बोल्ड फ़ॉन्ट-आकार: १५ | वरदाना बोल्ड वेट |
| font-family: verdana फ़ॉन्ट-वजन: 500 फ़ॉन्ट-आकार: १५ | वरदाना संख्यात्मक भार |
CSS में फ़ॉन्ट्स पर इस लेख के साथ आगे बढ़ना
फ़ॉन्ट-आकार विशेषता:
आकार विशेषता को कई तरीकों से सेट किया जा सकता है। इन तरीकों की सूची नीचे दें।
● En मध्यम ’,। बड़े’ जैसे सीमित मूल्य। वास्तव में कपड़ों के आकार की तरह, मूल्य XX लघु से XX बड़े तक हो सकते हैं!
● इसके मूल तत्व के सापेक्ष सेट करें, जैसे 'बड़ा' या 'छोटा'।
● मूल तत्व के आकार का प्रतिशत
● मूल तत्व के आकार को सीधे अपनाने के लिए 'विरासत' के रूप में सेट करें।
● पीएक्स (पिक्सेल), पीटी (अंक) या सेमी (सेंटीमीटर) की इकाइयों में निरपेक्ष मूल्य के रूप में
‘मध्यम’ इस पैरामीटर के लिए तयशुदा मान है।
CSS में फ़ॉन्ट्स पर इस लेख के साथ आगे बढ़ना
फ़ॉन्ट-परिवार विशेषता:
HTML में, सीएसएस फ़ॉन्ट परिवार फ़ॉन्ट नाम सेट करने के लिए है। आप या तो टैग के साथ एक ही फ़ॉन्ट नाम रख सकते हैं। या आप फ़ॉन्ट-परिवार सूची के रूप में कई मान निर्दिष्ट कर सकते हैं जो उस प्राथमिकता को परिभाषित करता है जिसमें ब्राउज़र को फ़ॉन्ट चुनना चाहिए।
फॉल-बैक सिस्टम के रूप में सूची को बाएं से दाएं प्राथमिकता दी जाती है। यदि उपलब्ध है, तो पहला मान चुना जाता है, या नियंत्रण अगले एक पर जाता है, जब तक कि सूची के अंत तक नहीं पहुंच जाता है। डिफ़ॉल्ट फ़ॉन्ट परिवार ब्राउज़र वरीयताओं द्वारा परिभाषित किया गया है।
CSS फ़ॉन्ट परिवार 2 प्रकार के होते हैं - सामान्य परिवार और फ़ॉन्ट परिवार।
● सामान्य परिवार - कुछ सामान्य विशेषताओं के आधार पर, फोंट को ’सेरिफ़’, ans सेन्स सेरिफ़ ’,‘ मोनोपेज़ ’आदि के रूप में वर्गीकृत किया जाता है। उदाहरण के लिए, सेन्स सेरिफ़ का अर्थ है बिना सेरिफ़ स्टाइल के फोंट।
● परिवार के नाम - विशिष्ट परिवार पदानुक्रम से संबंधित फोंट। टाइम्स, एरियल, कूरियर सभी फ़ॉन्ट परिवार हैं और टाइम्स न्यू रोमन टाइम्स परिवार का एक उदाहरण फ़ॉन्ट है।
विभिन्न फ़ॉन्ट परिवार उपयोग विकल्प नीचे उदाहरण 4 में सूचीबद्ध हैं।
| उदाहरण 4: फ़ॉन्ट परिवार विकल्प | |
| font-family: verdana | वरदाना सिंगल फॉन्ट |
| फ़ॉन्ट-परिवार: 'टाइम्स न्यू रोमन', टाइम्स, कूरियर | टाइम्स न्यू रोमन फ़ॉन्ट परिवारों द्वारा पीछा किया |
| फ़ॉन्ट-परिवार: एरियल, मिनीवन, संस-सेरिफ़ | एरियल के बाद सामान्य परिवार |
नोट करने के लिए कुछ सामान्य बिंदु
● कई अन्य सीएसएस गुणों की तरह, कुछ सेटिंग्स अलग-अलग ब्राउज़रों में भिन्न होती हैं। कुछ दुर्लभ फ़ॉन्ट सेटिंग्स का उपयोग करने से पहले ब्राउज़र समर्थन की जांच करें।
● आप फ़ॉन्ट-शैली, फ़ॉन्ट-वजन आदि के व्यक्तिगत टैग का उपयोग करके अलग से फ़ॉन्ट सेटिंग्स सेट कर सकते हैं। वैकल्पिक रूप से यदि आप कॉम्पैक्ट कोड पसंद करते हैं, तो आप एक ही पंक्ति में सभी मानों के साथ शॉर्टहैंड फ़ॉन्ट विशेषता का उपयोग कर सकते हैं।
● उपयोगकर्ता परिदृश्यों में जहां आप चाहते हैं कि ब्राउज़र आकार के आधार पर फ़ॉन्ट अलग-अलग हो, एक उपयोगी फ़ॉन्ट आकार सेटिंग है जिसे उत्तरदायी फ़ॉन्ट सेटिंग कहा जाता है। यह एक vw इकाई के साथ सेट किया जा सकता है, जिसका अर्थ है 'व्यूपोर्ट चौड़ाई'। इस तरह पाठ का आकार ब्राउज़र विंडो के आकार का अनुसरण करेगा।
आशा है कि आपको सीएसएस में फ़ॉन्ट्स के बारे में जानकारी मिली थी। नीचे टिप्पणी अनुभाग में हमारे साथ अपने अनुभव साझा करें। खुश डिजाइनिंग!
यदि आप वेब-विकास के बारे में अधिक जानने में रुचि रखते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, ट्विटर बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।