फ़ॉन्ट-आकार यहां कैसे काम नहीं कर रहा है?

The 6 Most Important CSS Techniques You Need To Know में निम्नलिखित सलाह के बाद, मैंने अपने शरीर के font-size को 62.5% पर सेट किया, container div's font-size से 1.4 em (आलेख से मामूली भिन्नता)। p.tags और p.published का font-size 1em पर सेट है।फ़ॉन्ट-आकार यहां कैसे काम नहीं कर रहा है?

हालांकि, यह मेरे लिए काम नहीं करता है। p.tags और p.published में सामान्य टेक्स्ट और टेक्स्ट दोनों एक ही आकार (16.8px फ़ायरबग द्वारा गणना के रूप में) के रूप में बाहर आते हैं। क्या आप समझा सकते हैं कि मेरा कोड क्यों काम नहीं कर रहा है? मैं फ़ायरफ़ॉक्स 3.6.3 में परीक्षण कर रहा हूँ। लेखक द्वारा दिखाए गए sample page एक ही ब्राउज़र में ठीक काम करता है।

मैंने पूरे पृष्ठ को इसके लिए लंबाई के लिए क्षमा मांग लिया है, लेकिन मैंने सोचा कि कुछ भी छोड़ना बेहतर नहीं है।

<html> 
     <head> 
       <title>Title</title> 
       <style type="text/css"> 
         body { 
           font-family: Georgia, "Century Schoolbook", "Times New Roman", Serif; 
           font-size: 62.5%; 
           background-color: #2B3856; /* Dark slate blue */ 
         } 
         h1, h2, h3, h4, h5, h6 { 
           font-family: Verdana, Helvetica, Tahoma, "Sans Serif"; 
           color: #2B3856; 
           margin-top: 2px; 
         } 
         h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 
           text-decoration: none; 
           color: #2B3856; 
         } 
         h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { 
           text-decoration: underline; 
         } 
         div#container { 
           width: 800px; 
           font-size: 1.4em; 
           margin: 5px auto; 
           background-color: #E3E4FA; /* Lavender */ 
         } 
         #sidebar { 
           width: 200px; 
           float: right; 
           margin: 0px; 
           padding: 0px; 
         } 
         #sidebar div { 
           padding: 0 5px 5px; 
         } 
         #sidebar div.shadowbox { margin-right: 5px; } 
         #content { 
           width: 600px; 
           float: left; 
           margin: 0px; 
           padding: 0px; 
         } 
         #header { 
           /*background-color: white;*/ 
           background-color: #2B3856; /* #E3E4FA; Lavender */ 
           margin-bottom: 5px; 
           height: 100px; 
         } 
         #header h1 { 
           color: #B93B8F; /* Plum */ 
           line-height: 100px; 
           text-align: center; 
           font-size: 45px; 
         } 
         #description { 
           color: #7D1B7E /* Dark Orchid */ 
         } 
         a { 
           text-decoration: underline; 
           color: #153E7E; 
         } 
         a:hover { 
           text-decoration: none; 
         } 
         div#posts { 
           padding: 0px; 
           font-size: 1.2em; 
           margin: 0px; 
         } 
         div#posts div.post { 
           padding: 5px; 
           margin: 0px 5px 15px 5px; 
         } 
         p.tags, p.published { 
           font-size: 1em; 
         } 
         .shadowbox { 
           background: repeat 0 0 url('http://www.jawsalgorhythmics.com/images/darkness-100x100-10pct.png'); 
         } 
         .justifycenter { text-align: center; } 
         .floatright { float:right; } 
         .floatleft { float: left; } 
         .clearright { clear: right; } 
         .clearleft { clear:left; } 
         .clearboth { clear: both; } 
         .halfsidebarwidth { width: 82px; } 
       </style> 
     </head> 
     <body> 
       <div id="container"> 
         <div id="header"> 
           <h1>Odds 'n Ends</h1> 
         </div> <!-- header --> 

         <div id="sidebar"> 
           <div class="shadowbox"> 
             <br /><p class="justifycenter"><img width="64" height="64" src="{PortraitURL-64}" /></p> 

             <div class="floatleft halfsidebarwidth"><a href="/archive" class="archive">Archives</a></div> 
             <div class="floatleft halfsidebarwidth"><a href="{RSS}" class="rss">RSS</a></div> 
             <div class="clearboth"></div> 
           </div> 
         </div> <!-- sidebar --> 

         <div id="content"> 
           <div id="posts"> 

               <div class="post shadowbox"> 
                   <span class="quote"> 
                     "It does not matter how slow you go so long as you do not stop." 

                     <div class="source">Wisdom of <a href="#" title="http://en.wikipedia.org/wiki/Confucius">Confucius</a></div> 
                   </span> 
                 <p class="tags">Tags: #<a href="#" title="http://demo.tumblr.com/tagged/wisdom">wisdom</a>&nbsp; </p> 

                 <p class="published">Posted: Nov 08, 2006 at 2:27 pm 
                   &nbsp;&nbsp;<a href="#" title="http://demo.tumblr.com/post/236/it-does-not-matter-how-slow-you-go-so-long-as-you">Permalink</a>&nbsp;&nbsp; <a href="#" title="http://tumblr.com/xr06k">Short URL</a></p> 
               </div> 

           </div> <!-- posts --> 
         </div> <!-- content --> 

         <div class="clearboth"></div> 

         <div id="footer" style="text-align: justify;"> 
           <h1>The footer</h1> 
         </div> 
       </div> <!-- container --> 
     </body> 
</html>

स्रोत

2010-05-12 markvgti

HTML की पूरी सूची पोस्ट करने के बजाय इसका उपयोग करें: http://jsfiddle.net/JYfqL/। – Kyle

यह मेरे लिए एक व्यर्थ और संभवतः गलत "तकनीक" जैसा लगता है। "जैसे बॉडी फ़ॉन्ट आकार को 62.5% पर सेट करके, जो आपके फ़ॉन्ट आकार को 10 पिक्सल पर सेट करेगा" गलत है और मैं नहीं देख सकता कि यह वेब डिज़ाइन को किसी भी आसान या अलग कैसे बनाता है। यह सिर्फ आपके जैसी समस्याओं का कारण बनता है। – RoToRa

आपका <p class="tags"> और <p class="published"> तत्वों container div, जो posts div, जो 1.2em की एक फ़ॉन्ट आकार है में अंदर 1.4em का एक अक्षर का आकार है, और भी अंदर हैं। मुझे लगता है कि अनुच्छेदों का फ़ॉन्ट आकार 1em पर सेट करना वास्तव में कुछ भी नहीं करता है, क्योंकि em इकाई संचयी है। तो यदि आपका "रूट" फ़ॉन्ट आकार 62.5% है, तो इसे पहले div के लिए 40% बढ़ाया जा रहा है, और दूसरे div के लिए 20% की वृद्धि हुई है। आपके दो पैराग्राफ में यह फ़ॉन्ट आकार भी होगा, क्योंकि वे आकार में वृद्धि या कमी नहीं कर रहे हैं।

असल में, यदि आप "टैग" और "प्रकाशित" पैराग्राफ छोटे टेक्स्ट के लिए चाहते हैं, तो उन्हें एक से कम आकार दें, उदा। 0.9em। यह उन्हें एक ही मूल div में अन्य तत्वों की तुलना में 10% कम आकार देगा।

स्रोत

2010-05-12 09:50:40

आप सही हैं, बिल्कुल !!!! वह वास्तव में मुझसे बेवकूफ था-एम आकार पूर्वजों के सापेक्ष है - उनमें से सभी !!! तो निश्चित रूप से प्रभाव संचयी है। धन्यवाद! – markvgti

ग्राहम सही था, मैंने सेट किया;

p.tags, p.published { 
    font-size: 0.5em; 
}

और यह फ़ॉन्ट आकार बदल गया। Updated Jsfiddle her ई।

ईएम की गणना शरीर के फ़ॉन्ट के मूल आकार से की जाती है। यह कैसे काम करता है इस पर एक स्पष्टीकरण के लिए Look here :)

स्रोत

2010-05-12 09:58:40 Kyle

लेख लिंक के लिए धन्यवाद। – markvgti

कोई समस्या नहीं :) उम्मीद है कि यह मदद करता है। – Kyle

फ़ॉन्ट-आकार यहां कैसे काम नहीं कर रहा है?

उत्तर

संबंधित मुद्दे