फन्ट साइज परिवर्तन गर्न Ems प्रयोग गर्दै
जब तपाइँ वेब पेज निर्माण गर्दै हुनुहुन्छ, अधिकतर पेशेवरहरूले सिफारिस गर्छन् कि तपाईं फन्टहरू (र वास्तवमा, सबै कुराहरू) मा आकार राख्नुस् जसको सापेक्ष उपाय जस्तै ems, exs, percentages, or pencils। यो किनभने किनभने तपाईं वास्तवमा सबै फरक तरिकाहरू थाहा छैन जुन कसैले तपाइँको सामग्री हेर्न सक्छ। र यदि तपाईं पूर्ण माप (इन्च, सेन्टिमिटर, मिलिमिटर, बिन्दुहरू, वा पिकासहरू) प्रयोग गर्नुहुन्छ भने यसले फरक यन्त्रमा पृष्ठको प्रदर्शन वा पढ्न सक्ने क्षमतालाई असर पार्न सक्छ।
र W3C सिफारिस गर्दछ कि तपाईंले आकारका लागि एएम प्रयोग गर्नुहुन्छ।
तर कति ठूलो छ?
W3C को अनुसार एक:
"तत्वको 'फन्ट-साइज' गुणको गणना गरिएको मानको बराबर हो। यसको प्रयोग गर्दा 'ए' यो 'फन्ट-आकार' सम्पत्तिको मानमा हुन्छ जब अभिभावक तत्वको फन्ट साइजमा। "
अन्य शब्दहरूमा, इमहरूसँग पूर्ण आकार छैन। तिनीहरूले आफ्नो आकार मूल्यहरू मा आधारित हुन्छन् जहाँ तिनीहरू छन्। धेरै वेब डिजाइनरहरूको लागि , यो यसको अर्थ हो कि तिनीहरू वेब ब्राउजरमा छन्, त्यसैले त्यो ब्राउजरको लागि 1em लामो एउटा फन्ट बिल्कुल त्यहि साइजको रूपमा डिफल्ट फन्ट साइजको रूपमा हो।
तर पूर्वनिर्धारित आकार कति लामो छ? 100% निश्चित गर्न कुनै तरिका छैन, ग्राहकले तिनीहरूका ब्राउजरमा आफ्नो डिफल्ट फन्ट साइज परिवर्तन गर्न सक्दछन्, तर किनकि प्रायजसो व्यक्तिले तपाइँलाई मान्न सक्दैन कि अधिकांश ब्राउजरहरू 16px को डिफल्ट फन्ट आकार छ। त्यसैले धेरै समय 1 मिनेट = 16px ।
पिक्सेलमा सोच्नुहोस्, उपायको लागि Ems प्रयोग गर्नुहोस्
एकपटक तपाइँले थाहा पाउनु भएको छ कि पूर्वनिर्धारित फन्ट आकार 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.625 मिनेट (16 x 0.625 = 10)
विरासत बिर्सनुहोस्!
तर यो सबै छ कि ems छ। तपाईंले सम्झनु पर्ने अर्को कुरा भनेको हो कि उनी आमाबाबुको आकारमा छन्। यसैले यदि तपाईसँग फरक फन्ट आकारहरू भएको नेस्ट गरिएका तत्वहरू छन् भने, तपाईं फन्टको साथ धेरै सानो वा ठूला भन्दा ठूलो आशा गर्न सक्नुहुनेछ।
उदाहरणका लागि, तपाईंसँग यो शैली पाना हुन सक्छ:
p {font-size: 0.875em; }
.footnote {फन्ट-साइज: 0.625em; }
यसले फन्टहरू जुन मुख्य पाठ र क्रमशः फुटनोटहरूको लागि 14px र 10px छन्। तर यदि तपाइँ अनुच्छेद भित्र फुटनोट राख्नुहुन्छ भने, तपाईं पाठको साथ 10px भन्दा बढी 8.75 पिक्सेल हुन सक्नुहुनेछ। यसलाई प्रयास गर्नुहोस्, यो माथिको CSS र निम्न HTML लाई कागजातमा राख्नुहोस्:
यो फन्ट 14 पीएक्स वा 0 9 0 ईएम उचाइमा छ।
यस अनुच्छेदमा फुटनोट छ।
जबकि यो केवल एक फुटनोट अनुच्छेद हो।
फुटनोट पाठ 10px मा पढ्न गाह्रो छ, यो लगभग 8.75px मा अवैध छ।
त्यसोभए, जब तपाईँ ईएम प्रयोग गर्दै हुनुहुन्छ, तपाई आमाबाबुका वस्तुहरूको आकारबाट धेरै चिन्तित हुनु आवश्यक छ, वा तपाइँ आफ्नो पृष्ठमा केहि साँच्चै अजीब आकारका तत्वहरूसँग समाप्त हुनुहुनेछ।