CSS Academy · पाठ

Font Family और Web-Safe Fonts

font families सेट कीजिए और समझिए कि सभी ब्राउज़रों में कौन-से fonts सुरक्षित रूप से उपयोग किए जा सकते हैं।

पाठ 1, कुल 4 में से13 चरण

Font Family और Web-Safe Fonts, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

font-family प्रॉपर्टी

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

<p>This text renders in the page's body font stack.</p>

सामान्य फ़ॉन्ट परिवार

CSS वैकल्पिक व्यवस्थाओं के रूप में पाँच सामान्य परिवार परिभाषित करता है:

serif — सजावटी स्ट्रोक वाले फ़ॉन्ट (Times, Georgia)
sans-serif — स्ट्रोक के बिना साफ़-सुथरे फ़ॉन्ट (Arial, Helvetica)
monospace — समान चौड़ाई वाले फ़ॉन्ट (Courier, Consolas)
cursive — हस्तलिपि शैली वाले फ़ॉन्ट
fantasy — सजावटी प्रदर्शन फ़ॉन्ट

वेब-सुरक्षित फ़ॉन्ट

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

Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
Serif: Georgia, Times New Roman
Monospace: Courier New, Consolas

स्पेस वाले फ़ॉन्ट नाम

स्पेस वाले फ़ॉन्ट नामों को उद्धरण चिह्नों में रखना आवश्यक है:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

फ़ॉन्ट क्रम की सर्वोत्तम पद्धति

अपना फ़ॉन्ट क्रम इस प्रकार बनाएँ:

अपना पसंदीदा फ़ॉन्ट (जो इंस्टॉल न भी हो सकता है)
एक या दो समान वैकल्पिक फ़ॉन्ट
अंतिम विकल्प के रूप में एक सामान्य परिवार

<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

सिस्टम यूआई फ़ॉन्ट

आधुनिक डिज़ाइन में अक्सर सिस्टम फ़ॉन्ट का उपयोग किया जाता है — यानी ऑपरेटिंग सिस्टम का मूल यूआई फ़ॉन्ट। इससे रूप मूल सिस्टम जैसा लगता है और किसी डाउनलोड की आवश्यकता नहीं होती:

<p class="system-ui-text">This uses your OS's native UI font.</p>

कोड के लिए मोनोस्पेस फ़ॉन्ट क्रम

कोड संपादकों और टर्मिनल के लिए मोनोस्पेस फ़ॉन्ट क्रम आवश्यक होता है:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

font-family को विरासत में लेना

अधिकांश तत्व अपने पैरेंट से font-family की विरासत लेते हैं। कुछ फ़ॉर्म तत्व (<input>, <textarea>) कुछ ब्राउज़र में डिफ़ॉल्ट रूप से विरासत नहीं लेते — इन्हें स्पष्ट रूप से निर्धारित करें:

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

उपलब्ध फ़ॉन्ट जाँचना

@font-face के अंदर local() फ़ंक्शन से आप जाँच सकते हैं कि कोई सिस्टम फ़ॉन्ट उपलब्ध है या नहीं। ब्राउज़र डाउनलोड करने से पहले स्थानीय फ़ॉन्ट को आज़माते हैं।

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

यूनिकोड-रेंज सबसेट बनाना

फ़ॉन्ट लोड करते समय @font-face में unicode-range का उपयोग करके केवल आवश्यक अक्षर-रेंज लोड करें। इससे बहुभाषी साइटों के लिए डाउनलोड का आकार कम होता है।

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

वैरिएबल फ़ॉन्ट का परिचय

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

त्वरित जाँच

Sans-serif फ़ॉन्ट क्रम के अंतिम वैकल्पिक विकल्प के रूप में आपको किस सामान्य फ़ॉन्ट परिवार का उपयोग करना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

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

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Font Family और Web-Safe Fonts” पाठ निःशुल्क है?

हाँ—“Font Family और Web-Safe Fonts” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Font Family और Web-Safe Fonts” में मैं क्या सीखूँगा?

font families सेट कीजिए और समझिए कि सभी ब्राउज़रों में कौन-से fonts सुरक्षित रूप से उपयोग किए जा सकते हैं। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“Font Family और Web-Safe Fonts” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ