Font Families, Sizes, Weights In Hindi
एचटीएमएल वेब पेज में सीएसएस से बने वेबपेज और वेबसाइट डिज़ाइन यूजर इंटरफ़ेस और यूजर एक्सपेरिएंस को बेहतर करने और वेबपेज के डिफ़ॉल्ट डिस्प्ले टाइम को फ़ास्ट, वेब पेज टेक्स्ट के रीडेबल प्रीव्यू और टेक्स्ट कंटेंट के अट्रैक्शन के लिए प्रॉपर वेब पेज टेक्स्ट फॉण्ट फैमिली, फॉण्ट साइज, और फॉण्ट वेट, का सलेक्शन पर्टिकुलर वेबपेज के अनुसार प्रॉपर होना चाहिए।
So let’s apply CSS font properties in HTML web pages.
CSS Font Family in HTML Web Page.
मौजूदा एचटीएमएल वेब पेज में सीएसएस से बने वेबपेज के लिए सही फ़ॉन्ट फैमिली आपके एक्टिव वेबपेज में वेबपेज टेक्स्ट कंटेंट के लिए उपयोग होने वाले फॉण्ट टाइपफ़ेस या फॉण्ट स्क्रिप्ट स्टाइल को डिफाइन करते हैं। जहा आप डिफ़ॉल्ट वेब पेज फॉण्ट के बजाय आप अपने जरूरत के अनुसार मौजूदा फॉण्ट गैलरी में से डिजायर फॉण्ट को सलेक्ट कर डिजायर वेब पेज टेक्स्ट में अप्लाई कर सकते है. जहा आपको फॉण्ट फैमिली में कई प्रकार के मल्टीप्ल फॉण्ट सिलेक्शन विकल्प भी मिलते है।
Some examples of fonts for CSS in HTML web page.
body {
font-family: times new roman; /* create font family name */
}
Some examples of fonts for CSS in HTML web page.
Here you get some common font family defaults.
- Monospace: Courier New, Lucida Console
- Serif: Georgia, Times New Roman, Garamond
- Sans-serif: Arial, Helvetica, Verdana
- Cursive: Comic Sans MS, Brush Script MT
- Fantasy: Impact, Papyrus
Google font selection for CSS in HTML web page.
आप अपने मौजूदा एचटीएमएल वेब पेज में सीएसएस टेक्स्ट स्क्रिप्ट के लिए कई ऑनलाइन गूगल फॉण्ट गैलरी सलेक्शन मे से आप डायरेक्ट मल्टीप्ल गूगल फ़ॉन्ट को सीधे अपने वेब पेज में इम्पोर्ट कर सकते हैं. इसके लिए आपको अपने वेब पेज के मेटा टैग में उस फॉन्ट के प्रॉपर लिंक को कनेक्ट करना होगा।
Google font import example in CSS in HTML web page.
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>
body {
font-family: ‘Roboto’, times new roman;
}
Google font import example in css.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Google Font Import Example In Css</title>
<link href=”https://fonts.googleapis.com/css2?family=Roboto Condensed:wght@500;900&display=swap” rel=”stylesheet”>
</head>
<body>
<h1>You See the google font import example</h1>
<p>Now You See Google Import Font Roboto Condensed Example In Preview</p>
</body>
</html>
CSS font size in HTML web page.
एक बार अपने मौजूदा एचटीएमएल वेब पेज में सीएसएस टेक्स्ट फ़ॉन्ट सलेक्शन के बाद फॉन्ट साइज को सबसे छोटा से लेकर सबसे बड़े फॉन्ट साइज में प्रदर्शित किया जाता है. जैसे 1px, 1em, 1rem, %, आदि फॉन्ट साइज मेज़रमेंट का उपयोग करके किसी भी वेब पेज के लिए फॉन्ट साइज को निर्धारित किया जा सकता है। यहाँ आप सीएसएस में उपयोग होने वाले फॉन्ट साइज को अपनी जरूरत के अनुसार वेब पेज प्रीव्यू में तय कर सकते है।
font size example in CSS in HTML web page.
h1 {
font-size: 1.5rem; /* create responsive font size*/
}
p {
font-size: 1.8rem; /* create responsive paragraph text font size */
}
CSS responsive font size in HTML web page.
किसी भी एचटीएमएल वेब पेज में सीएसएस टेक्स्ट फॉण्ट रेस्पोंसिवनेस्स के लिए मीडिया क्वेरी फॉण्ट ऐट्रिब्यूट्स का उपयोग करके वेब डेवलपर अलग-अलग इलेक्ट्रॉनिक डिवाइस और डिस्प्ले स्क्रीन साइज़ के लिए फ़ॉन्ट साइज़ को एडजस्ट कर रेस्पॉन्सिव आर्डर में प्रीव्यू किया जाता है। ये फॉन्ट यूजर स्क्रीन बिहैवियर के अनुसार बढ़ते और स्क्रीन साइज के अनुसार प्रीव्यू में घटते आकार में प्रीव्यू होते है.
@media (max-width: 700px) {
h1 {
font-size: 3rem; /* create small screen size */
}
}
CSS font weight in HTML web page.
किसी भी एचटीएमएल वेब पेज में सीएसएस टेक्स्ट फॉण्ट वेट टेक्स्ट के डिफ़ॉल्ट बोल्ड बिहैवियर या फॉण्ट मोटाई आकार प्रीव्यू को मैनेज कर सकते है। जहा आप सामान्य फॉण्ट वेट प्रीव्यू आर्डर में रेगुलर फॉण्ट वेट, बोल्ड फॉण्ट और कस्टम फॉण्ट वेट न्यूमेरिक वैल्यू को अप्लाई किया जा सकता हैं. जहा आप मिनिमम फॉण्ट वेट में 100 सबसे छोटे फॉण्ट वेट से लेकर 900 सबसे बड़े तक फॉण्ट वेट सलेक्शन को मैन्युअल रूप से चुन सकते हैं।
font weight example in CSS in HTML web page.
h1 {
font-weight: 800; /* create Bold font weight */
}
p {
font-weight: 500; /* create regular font weight */
}
Example of CSS text font family, font size, font weight in HTML web page.
तो चलिए एचटीएमएल वेब पेज में सीएसएस फॉण्ट फैमिली, फॉण्ट साइज और फॉण्ट वेट के एक कॉमन बिहैवियर को समझते है।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title> Font Family Font Size Font Weight Example In Css</title>
<style>
body {
font-family: monotype corsiva;
margin: 4;
padding: 10px;
background-color: yellow;
}
h1 {
font-size: 3rem; /* create heading responsive font text */
font-weight: 400; /* increase font weight in bold order */
color: blue;
}
p {
font-size: 1.8rem; /* set custom font size */
font-weight: 700; /* display custom font weight */
color: red;
}
</style>
</head>
<body>
<h1>You Can See Font Family, Font Weight, And Font Size Example</h1>
<p>This Is The Second Sentence Which Elaborate Css Font Attributes</p>
</body>
</html>
CSS font family, font size and font weight in HTML web page.
किसी भी एचटीएमएल वेब के बेहतर प्रदर्शन और वेब कंटेंट प्रीव्यू के लिए फ़ॉन्ट फैमिली, फॉन्ट साइज और फॉन्ट वेट को प्रॉपर्ली अप्लाई कर, आप अपनी वेबपेज और वेबसाइट की डिफ़ॉल्ट रीडेबिलिटी और वेब पेज विजुअल अपीयरेंस को बेहतर कर सकते हैं। जहा आप किसी भी वेब पेज में इन फॉण्ट ऐट्रिब्यूट्स को अप्लाई कर अपने वेब पेज के रेस्पॉन्सिव बेहेवियर और वेब पेज प्रीव्यू आर्डर को बेहतर कर सकते है।
