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

font-sizeसंपत्ति आकार, या ऊंचाई, फ़ॉन्ट का उल्लेख है। font-sizeन केवल उस फ़ॉन्ट को प्रभावित करता है जिस पर इसे लागू किया जाता है, बल्कि इसका उपयोग em, rem, और पूर्व लंबाई इकाइयों के मूल्य की गणना करने के लिए भी किया जाता है।

p ( font-size: 20px; )

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

लंबाई मान (जैसे px, em, rem, ex, आदि) जो लागू font-sizeनहीं किए जाते हैं वे ऋणात्मक नहीं हो सकते हैं।

पूर्ण खोजशब्द और मूल्य

.element ( font-size: small; )

यह निम्नलिखित पूर्ण खोजशब्द मूल्यों को स्वीकार करता है:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

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

अन्य पूर्ण मूल्यों में mm(मिलीमीटर), cm(सेंटीमीटर), in(इंच), pt(अंक) और pc(पिका) शामिल हैं। एक बिंदु एक इंच के 1/72 के बराबर है जबकि एक पाइका 12 अंकों के बराबर है - ये मान आमतौर पर मुद्रित दस्तावेजों के लिए उपयोग किए जाते हैं।

संबंधित कीवर्ड

.element ( font-size: larger; )

• larger
• smaller

उदाहरण के लिए, यदि मूल तत्व का फ़ॉन्ट आकार है small, तो परिभाषित तत्व के साथ एक बच्चा तत्व बच्चे के तत्व के largerलिए फ़ॉन्ट आकार के बराबर होगा medium।

प्रतिशत मान

.element ( font-size: 110%; )

प्रतिशत मान, जैसे कि 110% का फ़ॉन्ट-आकार सेट करना, मूल तत्व के फ़ॉन्ट आकार के सापेक्ष भी हैं, जैसा कि डेमो में दिखाया गया है:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन क़दबेल देखें।

उन्हें ईकाई

.element ( font-size: 2em; )

एम यूनिट मूल तत्व के फ़ॉन्ट आकार के गणना मूल्य के आधार पर एक सापेक्ष इकाई है। इसका मतलब यह है कि बच्चे के तत्व अपने फ़ॉन्ट-आकार को सेट करने के लिए हमेशा अपने माता-पिता पर निर्भर होते हैं। उदाहरण के लिए:

 
This is a heading
This is some text.

.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )

ऊपर दिए गए उदाहरण में, पैराग्राफ का फ़ॉन्ट आकार 16px होगा क्योंकि 1 x 16 = 16px जबकि शीर्षक 32px होगा क्योंकि 2 x 16 = 32px। मूल तत्व के फ़ॉन्ट-आकार के आधार पर स्केलिंग टाइप करने के कई फायदे हैं, अर्थात् हम एक कंटेनर में तत्वों को लपेट सकते हैं और जानते हैं कि सभी बच्चे हमेशा एक दूसरे के सापेक्ष होंगे:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा ईकाई कैसे काम करती है, यह पता लगाना पेन देखें।

रेम इकाई

रेम इकाइयों के मामले में, हालांकि, फ़ॉन्ट-आकार मूल तत्व (या htmlतत्व) के मूल्य पर निर्भर है ।

html ( font-size: 16px; ) p ( font-size: 1.5rem; )

उपरोक्त उदाहरण में, रेम यूनिट 16px के बराबर है (क्योंकि यह html/ रूट एलिमेंट से इनहेरिट की गई है ) और इस प्रकार सभी पैराग्राफ एलिमेंट्स के लिए फॉन्ट साइज जीपीएक्सएक्स (1.5 x 16 = 24) के बराबर होगा। ईएम इकाइयों के विपरीत, पैराग्राफ जड़ के अलावा अपने सभी माता-पिता की स्टाइलिंग को अनदेखा करेगा।

यह इकाई निम्नलिखित ब्राउज़रों द्वारा समर्थित है:

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

एक्स यूनिट

.element ( font-size: 20ex; )

पूर्व इकाइयों के लिए, 1ex मूल तत्व के लोअरकेस अक्षर x की गणना की ऊंचाई के बराबर होगा। इसलिए उदाहरण के नीचे htmlतत्व को सेट किया गया है 20pxऔर अन्य सभी फ़ॉन्ट-आकार उस विशेष फ़ॉन्ट की x-ऊँचाई से निर्धारित होते हैं।

पेन देखें कि कोडपैन पर सीएसएस-ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा पूर्व इकाई कैसे काम करती है।

तत्व font-familyपर मेरी जगह के ऊपर डेमो के साथ प्रयोग htmlयह देखने के लिए कि अन्य फ़ॉन्ट-आकार कैसे बदलते हैं।

व्यूपोर्ट इकाइयाँ

.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )

व्यूपोर्ट इकाइयाँ, जैसे vwऔर vh, व्यूपोर्ट के आयाम के सापेक्ष किसी तत्व का फ़ॉन्ट-आकार निर्धारित करें:

• व्यूपोर्ट चौड़ाई का 1vw = 1%
• व्यूपोर्ट ऊँचाई का 1vh = 1%

तो अगर हम निम्नलिखित उदाहरण लेते हैं:

.element ( font-size: 100vh; )

फिर यह बताएगा कि तत्व का फ़ॉन्ट-आकार हमेशा हर समय व्यूपोर्ट की ऊंचाई का 100% होना चाहिए (50vh 50%, 15vh 15% और इतने पर होगा)। नीचे डेमो में टाइप खिंचाव देखने के लिए उदाहरण की ऊंचाई का आकार बदलने की कोशिश करें:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा vh इकाइयों के साथ पेन आकार प्रकार देखें।

vw इकाइयाँ इस मायने में भिन्न हैं कि यह व्यूपोर्ट की चौड़ाई से अक्षर की ऊंचाई तय करती है, इसलिए नीचे के डेमो में आपको इन बदलावों को देखने के लिए क्षैतिज रूप से ब्राउज़र विंडो का आकार बदलना होगा:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा vw इकाइयों के साथ पेन आकार प्रकार देखें।

ये इकाइयाँ निम्नलिखित ब्राउज़रों द्वारा समर्थित हैं:

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
31+	7+	31+	27+	9+	4.4+ है	7.1+

यह ध्यान रखना महत्वपूर्ण है कि दो अन्य व्यूपोर्ट इकाइयाँ हैं: vminऔर vmax। पहले मानों को ढूंढेगा vhऔर vwफ़ॉन्ट-आकार को दो के सबसे छोटे सेट के रूप में vmaxसेट करेगा, जो फ़ॉन्ट-आकार को इन दो मूल्यों में से सबसे बड़ा सेट करता है।

Ch यूनिट

.element ( font-size: 24ch; )

chइकाई उस इकाई के समान है exजिसमें यह फ़ॉन्ट की 0 (शून्य) ग्लिफ़ की चौड़ाई के संबंध में एक तत्व के फ़ॉन्ट-आकार को निर्धारित करेगा:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा ch इकाइयों के साथ पेन आकार प्रकार देखें।

इस इकाई द्वारा समर्थित है:

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
27+	काम करता है	10+	काम करता है	9+	काम करता है	काम करता है