CSS में फ़ॉन्ट शॉर्टहैंड प्रॉपर्टी

पिछले पाठ में हमने टेक्स्ट के लिए कई प्रॉपर्टीज को समझा। अक्सर इन प्रॉपर्टीज में से प्रत्येक को अलग से लिखना काफी कठिन होता है, इसलिए CSS में अधिक सुविधा के लिए एक विशेष शॉर्टहैंड प्रॉपर्टी font मौजूद है। यह प्रॉपर्टी एक साथ फ़ॉन्ट साइज, फ़ॉन्ट फैमिली, फ़ॉन्ट वेट, फ़ॉन्ट स्टाइल और लाइन-हाइट सेट करने की अनुमति देती है।

वर्णित प्रॉपर्टी का सिंटैक्स निम्नलिखित है:

font-style font-weight font-size / line-height font-family

इस मामले में प्रॉपर्टीज के क्रम का महत्व है, और font-size और font-family अनिवार्य हैं। ध्यान दें कि सिंटैक्स में ऊपर वर्णित प्रॉपर्टीज के अलावा अन्य प्रॉपर्टीज इस शॉर्टहैंड प्रॉपर्टी में शामिल नहीं हैं।

आइए उदाहरणों पर नजर डालें।

उदाहरण

मान लीजिए कि हमारे पास निम्नलिखित स्टाइल्स हैं:

cssp {
  font-size: 16px;
  font-family: Arial;
}

आइए इन्हें शॉर्टहैंड प्रॉपर्टी के माध्यम से फिर से लिखें:

cssp {
  font: 16px Arial;
}

उदाहरण

मान लीजिए कि हमारे पास निम्नलिखित स्टाइल्स हैं:

cssp {
  font-size: 16px;
  font-family: Arial;
  line-height: 50px;
}

आइए इन्हें शॉर्टहैंड प्रॉपर्टी के माध्यम से फिर से लिखें:

cssp {
  font: 16px/50px Arial;
}

उदाहरण

मान लीजिए कि हमारे पास निम्नलिखित स्टाइल्स हैं:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

आइए इन्हें शॉर्टहैंड प्रॉपर्टी के माध्यम से फिर से लिखें:

cssp {
  font: bold 16px Arial;
}

उदाहरण

मान लीजिए कि हमारे पास निम्नलिखित स्टाइल्स हैं:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
  line-height: 50px;
  font-style: italic;
}

आइए इन्हें शॉर्टहैंड प्रॉपर्टी के माध्यम से फिर से लिखें:

cssp {
  font: bold italic 16px/50px Arial;
}

प्रायोगिक समस्याएं

cssp {
  font-family: "Times New Roman";
  font-size: 13px;
  line-height: 20px;
}

cssp {
  width: 300px;
  font-family: Arial;
  color: red;
  font-size: 40px;
  font-weight: bold;
}

cssp {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-indent: 50px;
  font-style: italic;
  line-height: 60px;
}