फ़ॉन्ट आकार के लिए प्रतिशत का उपयोग करना?

Question

मैंने हाल ही में फोंट का आकार बदलने के बारे में काफी कुछ पढ़ा है, इसमें से अधिकांश पीएक्स का उपयोग एक अक्षम्य अपराध के रूप में कर रहे हैं (ठीक है, शायद यह बुरा नहीं है, आपको विचार मिलता है) क्योंकि यह पुराने ब्राउज़र में ठीक से आकार बदलता नहीं है।

मैं वास्तव में एक मानक रखना चाहता हूं जो मैं स्वयं का उपयोग करता हूं, अतीत में जो पीएक्स रहा है, क्योंकि यह सरल है, समझने में आसान है और डिज़ाइन में निर्दिष्ट सटीक फ़ॉन्ट आकार प्राप्त करने में काफी आसान है - लेकिन मैं ' अब पीएक्स का उपयोग कर संदेह कर रहा हूँ।

मैंने हाल ही में एक प्रोजेक्ट पर एम का उपयोग किया क्योंकि इसे टेक्स्ट-आकार बदलने की कार्यक्षमता की आवश्यकता थी जिसे मैंने jQuery का उपयोग करके बनाया था। लेकिन मुझे यह बहुत निराशाजनक लगता है कि अगर आप एक दूसरे के अंदर दो तत्वों को निर्दिष्ट करते हैं, तो एएम आकार निर्दिष्ट होता है (उम्मीद है कि समझ में आता है)

तो मैं फ़ॉन्ट आकार बदलने के लिए% का उपयोग करने के बारे में सोच रहा था, मैं मैंने देखा है कि कुछ बड़ी वेबसाइटें इस तकनीक (अर्थात्, याहू) का उपयोग करती हैं और जो कुछ मैं समझता हूं उससे लगता है कि यह अविश्वसनीय रूप से कष्टप्रद प्रवर्धन चीज़ के बिना एम के सभी फायदे हैं।

तो संक्षेप में, मैं बस सोच रहा हूं कि सीएसएस में फ़ॉन्ट आकार बदलने के लिए% का उपयोग करने में कोई समस्या है या नहीं? फ़ॉन्ट-आकार बदलने के मामले में पीएक्स का उपयोग करने से बेहतर होगा? और क्या कोई ध्यान देने योग्य ड्रॉ बैक हैं?

क्षमा याचना करता है, तो सवाल से पहले blurb एक छोटे से ज्यादा है:/मैं अभी भी एक तरह से पूरे क्यूए बात

Answer 1

करने के लिए इस्तेमाल हो रही हो सकता है कि यह एक फ़ॉन्ट का आकार बदलने के लिए स्क्रिप्ट बनाने की अधिक समझ कर देगा। मैंने एक स्क्रिप्ट बनाई थी जो वास्तव में आप चाहते थे, लेकिन मैं इसे और नहीं ढूंढ सकता।

छद्म कोड:

var fontSize = 15; // (em) input 
var fontResize = -1;// (em)input 
fontSize = fontSize+fontResize; //current div 

for(every inherent parent classname == 'classname-em') 
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90; 

तो शब्दों में समझाया। स्क्रिप्ट को कुछ फोंट का आकार बदलने की जरूरत है, जब यह किया जाता है तो यह उन फ़ॉन्ट्स का आकार बदलने के लिए कुछ माता-पिता divs को भी देखेगा, सिवाय इसके कि उन्हें अपने निहित से 10% कम आकार दिया जाएगा। कुछ परेशानियों के साथ आपके पास सही रूपांतरण होगा। पैडिंग और सीमा चौड़ाई से बचने के लिए भी प्रयास करें।

Answer 2

FitText नामक एक jQuery प्लगइन है। यह पर्सेंट के आधार पर पाठ का आकार बदलता है। यदि विज़िटर को किसी कारण से जावास्क्रिप्ट अक्षम किया गया है, तो यह सामान्य के रूप में प्रदर्शित होगा, इसलिए एक उचित पीएक्स या ईएम बैकअप सेट करें।

यह jQuery पर निर्भर करता है, इसलिए आपको इसे अपने पृष्ठ में शामिल करना होगा (यदि आपके पास पहले से नहीं है)।

---

संदर्भ के लिए jquery.fittext.js:

/*global jQuery */ 
/*! 
* FitText.js 1.0 
* 
* Copyright 2011, Dave Rupert http://daverupert.com 
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/ 
* 
* Date: Thu May 05 14:23:00 2011 -0600 
*/ 

(function($){ 

    $.fn.fitText = function(kompressor, options) { 

     var settings = { 
     'minFontSize' : Number.NEGATIVE_INFINITY, 
     'maxFontSize' : Number.POSITIVE_INFINITY 
     }; 

      return this.each(function(){ 
       var $this = $(this);    // store the object 
       var compressor = kompressor || 1; // set the compressor 

     if (options) { 
      $.extend(settings, options); 
     } 

     // Resizer() resizes items based on the object width divided by the compressor * 10 
       var resizer = function() { 
        $this.css('font-size', Math.max(Math.min($this.width()/(compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
       }; 

       // Call once to set. 
       resizer(); 

       // Call on resize. Opera debounces their resize by default. 
     $(window).resize(resizer); 

      }); 

    }; 

})(jQuery); 

Answer 3

इस

body { 
    margin: 0px; 
    padding: 0px; 
    font-size: 62.5%; 
} 

body>#wrapper { 
    font-size:1em; 
} 

इसलिए का उपयोग कर, जब आप "आवरण" अंदर 1em कुछ ऐसा कहना कोशिश तुम बहुत करने के लिए इसी तरह की एक आकार होगा 10px।

3em == 30px 
.5em == 5px 
8.5em == 85px 

इस संक्रमण

पी में मदद मिलेगी: यहाँ एक उदाहरण तालिका हैडी: बेशक, आपको शरीर के बाद एक रैपर टैग की आवश्यकता है

Answer 4

वेब डिज़ाइन में मानक जहां तक ​​मैंने अनुभव किया है, शरीर में फ़ॉन्ट आकार सेट करने के लिए प्रतिशत का उपयोग करना है, फिर ईएमएस का उपयोग करने के लिए ईएमएस का उपयोग करना उसके बाद फ़ॉन्ट आकार। आप शरीर के टैग के बाहर कोई प्रतिकूल साइड इफेक्ट्स के बिना पर्सेंट का उपयोग कर सकते हैं, लेकिन मुझे लगता है कि कई डेवलपर्स के साथ काम करने में आसान ईएमएस मिलते हैं (कोई भी मुझे इस पर जांचने के लिए स्वतंत्र है)।

खतरे आता है यदि आप शरीर का फ़ॉन्ट आकार सेट करने के लिए ईएमएस का उपयोग करते हैं; पुराने ब्राउज़र चॉक और गलत रूप से टेक्स्ट प्रदर्शित करते हैं, खासकर जब ज़ूम किया जाता है।

Answer 5

CSS3 में, rem (रूट) का उपयोग करें। साइजिंग मूल तत्व के एम आकार से प्रभावित नहीं होगा।