Fonts In CSS Free web designing Course Tutorials #17
Fonts in CSS
इस ट्यूटोरियल में, हम CSS में विभिन्न फ़ॉन्ट्स के बारे में जानने जा रहे हैं। वे पूरे CSS की रीढ़ की हड्डी के रूप में कार्य करते हैं। CSS फ़ॉन्ट गुण फ़ॉन्ट परिवार, बोल्डनेस, आकार और पाठ की शैली को परिभाषित करते हैं। हमेशा की तरह, आइए हम tut17.html नामक एक नई फ़ाइल बनाकर ट्यूटोरियल शुरू करते हैं और एक त्वरित बॉयलरप्लेट जोड़ते हैं। इसके बाद, <head> अनुभाग में <शीर्षक> टैग के तहत शीर्षक सीएसएस फ़ॉन्ट्स के रूप में दें।
<body>
<h4>CSS Fonts</h4>
<p>Lets play with <span>fonts</span>. It is very exciting</p>
</body>
यह एक बहुत ही बुनियादी कोड है जो विभिन्न फोंट के आसपास खेलना शुरू करने के लिए एक उदाहरण है। CSS में, हमारे पास दो प्रकार के फोंट हैं- वेब-सुरक्षित फोंट और वेब फोंट। वेब सहेजे गए फोंट वे फोंट हैं जो अधिकांश ऑपरेटिंग सिस्टम के साथ पहले से इंस्टॉल आते हैं, इसलिए, इन फोंट का उपयोग करके आप कभी भी किसी भी त्रुटि का सामना नहीं करेंगे। लेकिन दूसरी तरफ, कुछ फोंट ओएस के साथ शिप नहीं किए जाते हैं; इसलिए उनका उपयोग करने के लिए, हमें उन्हें वेब से आयात करने की आवश्यकता है।
हम फ़ॉन्ट स्टैक की तकनीक का भी उपयोग कर सकते हैं। एक फ़ॉन्ट स्टैक उन फोंट की एक सूची है जो वरीयता के क्रम में सूचीबद्ध हैं आप उन्हें पसंद करना चाहते हैं यदि कुछ फोंट लोड नहीं हो रहे हैं। इसका उदाहरण नीचे दिखाया गया है-
p {font-family:'Ubuntu', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
यह सूची तब तक प्रसारित की जाएगी जब तक कि सिस्टम में निर्दिष्ट फ़ॉन्ट उपलब्ध नहीं है।
वेब सहेजे गए फोंट की पूरी सूची देखने के लिए, सीएसएस फ़ॉन्ट स्टैक नामक एक बहुत अच्छी वेबसाइट है। यह वेब सहेजे गए फोंट की पूरी सूची प्रदान करता है। वेब फोंट के बारे में बात करते हुए, हम उन्हें आसानी से Google से आयात कर सकते हैं। कोड आयात करने के लिए, Google फ़ॉन्ट्स से बेहतर कोई वेबसाइट नहीं है। इसका उपयोग करने के लिए, बस स्टाइल-शीट को कॉपी करें और इसे अपने कोड में जोड़ें और इच्छित फ़ॉन्ट के साथ फ़ॉन्ट स्टैक को अपडेट करें।
अगली संपत्ति फ़ॉन्ट आकार है।
p { font-family: ‘Franklin Gothic Medium’, ‘Aerial Narrow’, Aerial, sans-serif;
font-size: 33px;
}
फ़ॉन्ट आकार का उपयोग फ़ॉन्ट के आकार को सेट करने के लिए किया जाता है। उपरोक्त उदाहरण में, हमने अपने फ़ॉन्ट आकार का उपयोग 33px किया। पिक्सेल 'पीएक्स' फ़ॉन्ट आकार की इकाई है और यह एक इंच का 1/96 वां हिस्सा है।
अगली संपत्ति लाइन-ऊंचाई है। लाइन-ऊंचाई फोंट (वर्तमान फ़ॉन्ट और पिछले फ़ॉन्ट) के बीच रिक्ति है।
p {font-family: ‘Franklin Gothic Medium’, ‘Aerial Narrow’, Aerial, sans-serif;
font-size: 23px;
line-height: 1.8em;
}
अगली संपत्ति फ़ॉन्ट-भार है। फ़ॉन्ट वजन गुण सेट करता है कि पाठ में कितना मोटा या पतला चरित्र प्रदर्शित किया जाना चाहिए।
p{ font-family: ‘Franklin Gothic Medium’, ‘Aerial Narrow’, Aerial, sans-serif;
font-size: 23px;
line-height: 1.8em;
font-weight: bold;
}
विभिन्न अन्य फ़ॉन्ट गुण हैं। अधिकांश महत्वपूर्ण इस ट्यूटोरियल में शामिल किए गए हैं। अब आप विभिन्न अन्य फ़ॉन्ट गुणों को भी परख सकते हैं। एक शुरुआत के रूप में, मैं आपको सभी सीएसएस संपत्तियों को तब तक नहीं सीखने की सलाह दूंगा जब तक आप एक साधारण वेबसाइट बनाना नहीं सीखते। आप किसी भी समय उपलब्ध संदर्भों की मदद ले सकते हैं, लेकिन इसके लिए आपको मूल बातें पता होनी चाहिए।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Fonts</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<style>
p{
font-family:'Ubuntu', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 33px; /* 1/96th of an inch */
line-height: 1.3em;
}
span{
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h4>CSS Fonts</h4>
<p>Lets play with <span>fonts</span>. It is very exciting</p>
</body>
</html>
