वेब पेज पर टेक्स्ट फ़ॉन्ट आकार बदलने के लिए ईएमएस का उपयोग करना

जब आप एक वेब पेज बना रहे होते हैं, तो अधिकांश पेशेवर अनुशंसा करते हैं कि आप ईएमएस, एक्स, प्रतिशत, या पिक्सेल जैसे सापेक्ष माप के साथ फोंट (और वास्तव में, सब कुछ) आकार दें। ऐसा इसलिए है क्योंकि आप वास्तव में उन सभी अलग-अलग तरीकों को नहीं जानते हैं जिनसे कोई आपकी सामग्री देख सकता है। और यदि आप एक पूर्ण माप (इंच, सेंटीमीटर, मिलीमीटर, अंक, या पिका) का उपयोग करते हैं तो यह विभिन्न उपकरणों में पृष्ठ के प्रदर्शन या पठनीयता को प्रभावित कर सकता है। तथा W3C अनुशंसा करता है कि आप आकार के लिए ईएमएस का उपयोग करते हैं।

लेकिन एक एम कितना बड़ा है?

के अनुसार W3C एक उन्हें:

"उस तत्व की 'फ़ॉन्ट-आकार' संपत्ति के गणना मूल्य के बराबर है जिस पर इसका उपयोग किया जाता है। अपवाद तब होता है जब 'em' 'फ़ॉन्ट-आकार' संपत्ति के मूल्य में होता है, इस मामले में यह मूल तत्व के फ़ॉन्ट आकार को संदर्भित करता है।"

दूसरे शब्दों में, ईएमएस का पूर्ण आकार नहीं होता है। वे अपने आकार के मूल्यों को इस आधार पर लेते हैं कि वे कहाँ हैं। अधिकांश के लिए वेब डिजाइनर, इसका मतलब है कि वे एक वेब ब्राउज़र में हैं, इसलिए एक फ़ॉन्ट जो 1em लंबा है, ठीक उसी आकार का है जो उस ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट आकार का है।

instagram viewer

लेकिन डिफ़ॉल्ट आकार कितना लंबा है? 100% निश्चित होने का कोई तरीका नहीं है, क्योंकि ग्राहक अपना परिवर्तन कर सकते हैं डिफ़ॉल्ट फ़ॉन्ट आकार उनके ब्राउज़र में, लेकिन चूंकि अधिकांश लोग यह नहीं मानते हैं कि आप मान सकते हैं कि अधिकांश ब्राउज़रों का डिफ़ॉल्ट फ़ॉन्ट आकार 16px है। तो ज्यादातर समय 1em = 16px.

पिक्सेल में सोचें, माप के लिए ईएमएस का उपयोग करें

एक बार जब आप जान जाते हैं कि डिफ़ॉल्ट फ़ॉन्ट आकार 16px है, तो आप अपने ग्राहकों को आसानी से पृष्ठ का आकार बदलने की अनुमति देने के लिए ईएमएस का उपयोग कर सकते हैं लेकिन सोच सकते हैं पिक्सल आपके फ़ॉन्ट आकार के लिए। मान लें कि आपके पास आकार देने वाली संरचना कुछ इस तरह है:

शीर्षक 1 - 20px
शीर्षक 2 - 18px
शीर्षक 3 - 16px
मुख्य पाठ - 14px
उप पाठ - 12px
फुटनोट - 10px

आप माप के लिए पिक्सेल का उपयोग करके उन्हें इस तरह परिभाषित कर सकते हैं, लेकिन फिर IE 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)

विरासत को मत भूलना!

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

उदाहरण के लिए, आपके पास इस तरह की स्टाइल शीट हो सकती है:

इसके परिणामस्वरूप मुख्य पाठ और फ़ुटनोट के लिए क्रमशः 14px और 10px फ़ॉन्ट होंगे। लेकिन अगर आप एक पैराग्राफ के अंदर एक फुटनोट डालते हैं, तो आप टेक्स्ट के साथ समाप्त हो सकते हैं जो कि 10px के बजाय 8.75px है। इसे स्वयं आज़माएं, ऊपर रखें सीएसएस और एक दस्तावेज़ में निम्नलिखित HTML:

इसलिए, जब आप ईएमएस का उपयोग कर रहे हैं, तो आपको मूल वस्तुओं के आकार के बारे में बहुत जागरूक होने की आवश्यकता है, या आप अपने पृष्ठ पर कुछ वास्तव में अजीब आकार के तत्वों के साथ समाप्त हो जाएंगे।