पाठ और फ़ॉन्ट

font-family से एक फ़ॉन्ट चुनें, फिर पढ़ने में सुखद पाठ के लिए आकार, मोटाई और पंक्ति अंतराल समायोजित करें।

9 मिनट · 3 प्रश्न

एक फ़ॉन्ट अक्षरों की बनावट है: Arial, Georgia या Times New Roman फ़ॉन्ट हैं। CSS में, font-family property पाठ के किसी हिस्से का फ़ॉन्ट चुनती है। आप इसे अल्पविरामों से अलग किए गए फ़ॉन्टों की एक सूची देते हैं: ब्राउज़र पहले वाले को आज़माता है; अगर वह आगंतुक के उपकरण पर स्थापित नहीं है, तो वह अगले पर बढ़ता है, और इसी तरह आगे। यह एक प्लान A है, एक प्लान B, एक प्लान C।

body {
  font-family: Georgia, "Times New Roman", serif;
}

सूची का अंतिम शब्द एक सामान्य परिवार है: serif का मतलब सेरिफ़ वाले फ़ॉन्ट (अक्षरों के सिरों पर छोटे पैर, जैसे किसी छपे अखबार में), sans-serif का मतलब बिना सेरिफ़ वाले फ़ॉन्ट (अधिक आधुनिक दिखने वाले, जैसे Arial), और monospace का मतलब स्थिर-चौड़ाई वाले फ़ॉन्ट जहाँ हर अक्षर की चौड़ाई एक जैसी होती है (कोड के लिए आदर्श)। "Times New Roman" के इर्द-गिर्द उद्धरण चिह्नों पर ध्यान दें: जब भी किसी फ़ॉन्ट नाम में रिक्त स्थान हों, ये ज़रूरी होते हैं।

पाठ का आकार font-size से तय होता है। आप पिक्सेल पहले से जानते हैं (16px ब्राउज़रों का डिफ़ॉल्ट आकार है)। एक rem इकाई भी है: 1rem पेज के मूल आकार के बराबर होता है, तो 1.5rem उस आकार का डेढ़ गुना है। मोटाई, यानी अक्षरों के स्ट्रोक कितने मोटे हैं, font-weight से तय होती है: सामान्य पाठ के लिए normal, गाढ़े के लिए bold, या 100 (बहुत पतला) से 900 (बहुत मोटा) तक की एक संख्या, जहाँ 400 normal के बराबर है और 700 bold के।

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

एक आखिरी सेटिंग, जिसे अक्सर अनदेखा किया जाता है फिर भी आरामदायक पढ़ने के लिए यह अनिवार्य है: line-height, यानी पंक्ति की ऊँचाई। यह किसी अनुच्छेद की पंक्तियों के बीच की ऊर्ध्वाधर जगह को नियंत्रित करती है। बहुत कम हो, तो पंक्तियाँ दम घुटती हुई लगती हैं; बहुत अधिक हो, तो नज़र भटक जाती है। सबसे अच्छी प्रथा है एक बिना-इकाई मान, जो पाठ के आकार का गुणा करता है: line-height: 1.5; हर पंक्ति को फ़ॉन्ट आकार का डेढ़ गुना ऊँचा बनाता है।

p {
  font-size: 16px;
  line-height: 1.5;
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. आप font-family को अल्पविरामों से अलग किए गए कई फ़ॉन्ट क्यों देते हैं?
   • एक ही शब्द के भीतर फ़ॉन्ट मिलाने के लिए
   • ताकि कोई फ़ॉन्ट न मिले तो ब्राउज़र अगले को आज़माए
   • क्योंकि CSS वाक्यविन्यास के लिए कम से कम तीन मान ज़रूरी हैं
2. Georgia और Times New Roman, दोनों सेरिफ़ वाले फ़ॉन्ट हैं। सूची को उस सामान्य फ़ॉन्ट परिवार से पूरा कीजिए जो इनसे सबसे मिलता-जुलता है।

   body {
     font-family: Georgia, "Times New Roman", ___;
   }

   • serif
   • sans-serif
   • monospace
   • cursive
3. font-size: 20px और line-height: 1.5 के साथ, हर पंक्ति कितनी ऊँची है?
   • 20 पिक्सेल
   • 25 पिक्सेल
   • 30 पिक्सेल
   • 35 पिक्सेल