फ़ॉन्ट - सीएसएस-ट्रिक्स

fontसीएसएस में संपत्ति एक आशुलिपि संपत्ति है कि जोड़ती है सभी एक ही घोषणा में निम्नलिखित उप-गुण।

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

सात fontउप-गुण हैं, जिनमें शामिल हैं:

• font-stretch: यह प्रॉपर्टी फ़ॉन्ट की चौड़ाई निर्धारित करती है, जैसे कि संघनित या विस्तारित।
  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
• font-style: पाठ को इटैलिकाइज़्ड या तिरछा दिखाई देता है।
  • normal
  • italic
  • oblique
  • inherit
• font-variant: लक्ष्य पाठ को छोटे कैप में बदलता है।
  • normal
  • small-caps
  • inherit
• font-weight: वजन या फ़ॉन्ट की मोटाई निर्धारित करता है।
  • normal
  • bold
  • bolder
  • lighter
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • inherit
• font-size: फ़ॉन्ट की ऊंचाई निर्धारित करता है।
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller, larger
  • percentage
  • inherit
• line-height: इनलाइन तत्वों के ऊपर और नीचे अंतरिक्ष की मात्रा को परिभाषित करता है।
  • normal
  • number (font-size multiplier)
  • percentage
• font-family: तत्व पर लागू होने वाले फ़ॉन्ट को निश्चित करता है।
  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
  • "string"

फ़ॉन्ट आशुलिपि गोचछा

fontसंपत्ति आंशिक रूप से इसके लिए, और आंशिक रूप से विरासत मुद्दों की वजह से वाक्य रचना आवश्यकताओं के कारण, अन्य आशुलिपि गुण के रूप में के रूप में सरल नहीं है।

इस शॉर्टहैंड प्रॉपर्टी का उपयोग करते समय आपको उन कुछ चीजों का सारांश देना चाहिए, जिन्हें आपको जानना चाहिए।

अनिवार्य मूल्य

fontशॉर्टहैंड में दो मान अनिवार्य हैं: font-sizeऔर font-family। यदि इनमें से कोई भी शामिल नहीं है, तो पूरी घोषणा को नजरअंदाज कर दिया जाएगा।

इसके अलावा, font-familyसभी मूल्यों में से अंतिम घोषित किया जाना चाहिए, अन्यथा, फिर से, पूरी घोषणा को नजरअंदाज कर दिया जाएगा।

वैकल्पिक मान

अन्य सभी पाँच मान वैकल्पिक हैं। आप में से किसी को शामिल करते हैं font-style, font-variantऔर font-weight, वे पहले आना चाहिए font-sizeघोषणा में। यदि वे नहीं हैं, तो उन्हें नजरअंदाज कर दिया जाएगा और अनिवार्य मूल्यों को नजरअंदाज करने का कारण भी हो सकता है।

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

उपरोक्त उदाहरण में, तीन वैकल्पिक शामिल हैं। जब तक इन्हें पहले परिभाषित font-sizeकिया जाता है, तब तक इन्हें किसी भी क्रम में रखा जा सकता है।

line-heightइसी तरह वैकल्पिक भी शामिल है, लेकिन केवल font-sizeऔर बाद में केवल एक स्लैश के बाद ही घोषित किया जा सकता है :

body ( font: 44px/20px Georgia, sans-serif; )

उपरोक्त उदाहरण में, line-height"20px" है। यदि आप छोड़ देते हैं line-height, तो आपको स्लैश को भी छोड़ देना चाहिए, अन्यथा पूरी लाइन को अनदेखा कर दिया जाएगा।

फ़ॉन्ट-खिंचाव का उपयोग करना

font-stretchसंपत्ति CSS3 में नए इसलिए यदि यह किसी पुराने ब्राउज़र का समर्थन नहीं करता में इस्तेमाल किया जाता है font-stretchमें fontआशुलिपि, यह पूरी लाइन को नजरअंदाज किया जा करने के लिए कारण होगा।

युक्ति font-stretchइस तरह से बिना कमबैक सहित सिफारिश करती है :

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

वैकल्पिक के लिए विरासत

यदि आप किसी भी वैकल्पिक मान (सहित line-height) को छोड़ देते हैं, तो छोड़ा गया वैकल्पिक अपने मूल तत्व से मान प्राप्त नहीं करेगा, जैसा कि अक्सर टाइपोग्राफिक गुणों के साथ होता है। इसके बजाय, वे अपनी प्रारंभिक स्थिति में रीसेट हो जाएंगे।

उदाहरण के लिए:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

इस मामले में, वैकल्पिक मान (इटैलिक, स्मॉल-कैप और बोल्ड) तत्व fontपर घोषणा पर रखे जाते हैं । ये अधिकांश बाल तत्वों पर भी लागू होगा।

हालाँकि, क्योंकि हमने fontपैराग्राफ तत्वों पर संपत्ति को फिर से घोषित कर दिया है , सभी वैकल्पिक पैराग्राफ पर रीसेट हो जाएंगे, जिससे शैली, भिन्न, वजन और लाइन-ऊंचाई उनके प्रारंभिक मूल्यों पर वापस लौट आएगी।

सिस्टम फ़ॉन्ट्स को परिभाषित करने के लिए कीवर्ड

उपरोक्त सिंटैक्स के अलावा, fontसंपत्ति मूल्यों के रूप में कीवर्ड के उपयोग की भी अनुमति देती है। वे:

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

ये कीवर्ड मान उस फ़ॉन्ट को सेट करते हैं जो उस विशेष श्रेणी के लिए उपयोगकर्ता के ऑपरेटिंग सिस्टम पर उपयोग किया जाता है। उदाहरण के लिए, "कैप्शन" को परिभाषित करने से उस तत्व पर फ़ॉन्ट को उसी फ़ॉन्ट का उपयोग करने के लिए सेट किया जाएगा जो कैप्शन नियंत्रित (बटन, ड्रॉप-डाउन, आदि) के लिए ऑपरेटिंग सिस्टम पर उपयोग किया जाता है।

एक एकल कीवर्ड में पूरा मान शामिल होता है:

body ( font: menu; )

पहले बताए गए अन्य गुण इन कीवर्ड के साथ मान्य नहीं हैं। ये कीवर्ड केवल fontशॉर्टहैंड के साथ ही उपयोग किए जा सकते हैं और किसी भी व्यक्तिगत लॉन्गहैंड गुण का उपयोग करके घोषित नहीं किया जा सकता है।

अधिक जानकारी

• W3C Spec
• CSS-Tricks लेख: px - em -% - pt - कीवर्ड
• जोनाथन स्नुक: रिम के साथ फ़ॉन्ट आकार
• सीएसएस फ़ॉन्ट आशुलिपि संपत्ति पर एक प्राइमर
• सीएसएस फ़ॉन्ट आशुलिपि संपत्ति धोखा शीट

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
कोई	कोई	कोई	कोई	कोई	कोई	कोई