फ़ॉन्ट आकार बदलने के लिए ईएमएस का उपयोग करना
जब आप एक वेब पेज बना रहे हैं, तो अधिकांश पेशेवर सलाह देते हैं कि आप आकार के फोंट (और वास्तव में, सबकुछ) के साथ एक सापेक्ष उपाय जैसे ईएमएस, एक्सएस, प्रतिशत, या पिक्सल के साथ। ऐसा इसलिए है क्योंकि आप वास्तव में उन सभी अलग-अलग तरीकों से नहीं जानते हैं जिन्हें कोई आपकी सामग्री देख सकता है। और यदि आप एक पूर्ण माप (इंच, सेंटीमीटर, मिलीमीटर, अंक, या पिका) का उपयोग करते हैं तो यह विभिन्न उपकरणों में पृष्ठ के प्रदर्शन या पठनीयता को प्रभावित कर सकता है।
और डब्ल्यू 3 सी अनुशंसा करता है कि आप आकार के लिए ईएमएस का उपयोग करें।
लेकिन कितना बड़ा एएम है?
डब्ल्यू 3 सी के मुताबिक एक एम:
"उस तत्व की 'फ़ॉन्ट-आकार' प्रॉपर्टी के गणना मूल्य के बराबर है जिस पर इसका उपयोग किया जाता है। अपवाद तब होता है जब 'em' 'font-size' प्रॉपर्टी के मान में होता है, जिस स्थिति में यह संदर्भित करता है मूल तत्व के फ़ॉन्ट आकार के लिए। "
दूसरे शब्दों में, ईएमएस का पूर्ण आकार नहीं है। वे अपने आकार के मूल्यों को इस आधार पर लेते हैं कि वे कहां हैं। अधिकांश वेब डिज़ाइनरों के लिए , इसका मतलब है कि वे एक वेब ब्राउज़र में हैं, इसलिए 1x लंबा एक फ़ॉन्ट बिल्कुल उस आकार के डिफ़ॉल्ट फ़ॉन्ट आकार के समान आकार है।
लेकिन डिफ़ॉल्ट आकार कितना लंबा है? 100% निश्चित होने का कोई तरीका नहीं है, क्योंकि ग्राहक अपने ब्राउज़र में अपना डिफ़ॉल्ट फ़ॉन्ट आकार बदल सकते हैं, लेकिन अधिकांश लोग यह नहीं मान सकते कि अधिकांश ब्राउज़रों का डिफ़ॉल्ट फ़ॉन्ट आकार 16px है। तो अधिकांश समय 1em = 16px ।
पिक्सल में सोचें, माप के लिए ईएमएस का उपयोग करें
एक बार जब आप जानते हैं कि डिफ़ॉल्ट फ़ॉन्ट आकार 16px है, तो आप अपने क्लाइंट को आसानी से पृष्ठ का आकार बदलने की अनुमति देने के लिए ईएमएस का उपयोग कर सकते हैं लेकिन अपने फ़ॉन्ट आकार के लिए पिक्सेल में सोच सकते हैं।
मान लें कि आपके पास आकार बदलने की संरचना है:
- शीर्षक 1 - 20 पीएक्स
- शीर्षक 2 - 18 पीएक्स
- शीर्षक 3 - 16 पीएक्स
- मुख्य पाठ - 14 पीएक्स
- उप पाठ - 12 पीएक्स
- फुटनोट्स - 10 पीएक्स
आप उन्हें मापने के लिए पिक्सेल का उपयोग करके परिभाषित कर सकते हैं, लेकिन फिर आईई 6 और 7 का उपयोग करने वाले किसी भी व्यक्ति को आपके पृष्ठ का आकार बदलने में सक्षम नहीं होगा। तो आपको आकारों को ईएमएस में परिवर्तित करना चाहिए और यह सिर्फ कुछ गणित का मामला है:
- शीर्षक 1 - 1.25em (16 x 1.25 = 20)
- शीर्षक 2 - 1.125em (16 × 1.125 = 18)
- शीर्षक 3 - 1em (1em = 16px)
- मुख्य पाठ - 0.875em (16 x 0.875 = 14)
- उप पाठ - 0.75em (16 x 0.75 = 12)
- फुटनोट्स - 0.625em (16 x 0.625 = 10)
विरासत को मत भूलना!
लेकिन यह सब कुछ नहीं है। आपको याद रखने की दूसरी चीज यह है कि वे माता-पिता के आकार को लेते हैं। इसलिए यदि आपके पास अलग-अलग फ़ॉन्ट आकार वाले तत्वों को घोंसला है, तो आप अपेक्षाकृत अपेक्षाकृत छोटे या बड़े फ़ॉन्ट के साथ समाप्त हो सकते हैं।
उदाहरण के लिए, आपके पास स्टाइल शीट हो सकती है:
पी {फ़ॉन्ट आकार: 0.875em; }
.footnote {फ़ॉन्ट आकार: 0.625em; }
इसके परिणामस्वरूप फोंट मुख्य रूप से मुख्य पाठ और फुटनोट्स के लिए 14 पीएक्स और 10 पीएक्स होंगे। लेकिन अगर आप एक अनुच्छेद के अंदर एक फुटनोट डालते हैं, तो आप 10px के बजाय 8.75px पाठ के साथ समाप्त हो सकते हैं। इसे स्वयं आज़माएं, इसे ऊपर दिए गए सीएसएस और निम्नलिखित HTML को दस्तावेज़ में रखें:
यह फ़ॉन्ट ऊंचाई में 14 पीएक्स या 0.875 ईएमएस है।
इस अनुच्छेद में एक फुटनोट है।
हालांकि यह सिर्फ एक फुटनोट अनुच्छेद है।
फुटनोट टेक्स्ट 10px पर पढ़ना मुश्किल है, यह लगभग 8.75 पीएक्स पर लगभग गैरकानूनी है।
इसलिए, जब आप ईएमएस का उपयोग कर रहे हैं, तो आपको मूल वस्तुओं के आकारों से बहुत अवगत होना चाहिए, या आप अपने पृष्ठ पर कुछ वास्तव में अजीब आकार वाले तत्वों के साथ समाप्त हो जाएंगे।