कंटेनर आकार के आधार पर फ़ॉन्ट आकार कैसे सेट करें?

Question

मेरे पास एक कंटेनर है जिसमें एक% चौड़ाई और ऊंचाई है, इसलिए यह बाहरी कारकों पर निर्भर करता है। मैं कंटेनर के आकार के सापेक्ष एक स्थिर आकार होना चाहूंगा। क्या सीएसएस का उपयोग करने का कोई अच्छा तरीका है? font-size: x%केवल मूल फ़ॉन्ट आकार (जो 100% हो जाएगा) के अनुसार फ़ॉन्ट पैमाने पर होगा।

Comments

stackoverflow.com/questions/16056591/…

— मिंग स्लोगर

Answer 1

आप गणनाओं का उपयोग करके CSS3 के साथ ऐसा करने में सक्षम हो सकते हैं, हालांकि यह जावास्क्रिप्ट का उपयोग करने के लिए सबसे अधिक सुरक्षित होगा।

यहाँ एक उदाहरण है: http://jsfiddle.net/8TrTU/

JS का उपयोग करके आप पाठ की ऊँचाई को बदल सकते हैं, फिर उसी गणना को एक आकार बदलने वाली घटना में बाँध सकते हैं, आकार बदलने के दौरान इसलिए यह तराजू करता है जबकि उपयोगकर्ता समायोजन कर रहा है, या फिर भी आप अपने तत्वों का आकार बदलने की अनुमति दे रहे हैं।

Comments

उपयोग करने का प्रयास करें: window.onresize = function(event) { yourFunctionHere(); };साथ ही, इस तरह से यदि उपयोगकर्ता आपके पृष्ठ को आकार देने के बाद यह तय करता है कि आपका फ़ॉन्ट लोड हो गया है तो उचित रूप से बदल जाएगा

— हेनरी हॉव्सन

Answer 2

यदि आप व्यूपोर्ट चौड़ाई के प्रतिशत के रूप में फ़ॉन्ट-आकार सेट करना चाहते हैं, तो vwइकाई का उपयोग करें :

#mydiv { font-size: 5vw; }

अन्य विकल्प HTML में एम्बेडेड SVG का उपयोग करना है। यह सिर्फ कुछ लाइनें होंगी। पाठ तत्व के लिए फ़ॉन्ट-आकार विशेषता "उपयोगकर्ता इकाइयों" के रूप में व्याख्या की जाएगी, उदाहरण के लिए उन व्यूपोर्ट को शर्तों के अनुसार परिभाषित किया गया है। इसलिए यदि आप व्यूपोर्ट को 0 0 100 100 के रूप में परिभाषित करते हैं, तो 1 का फ़ॉन्ट-आकार svg तत्व के आकार का एक-सौवां होगा।

और नहीं, सीएसएस में गणना का उपयोग करने का कोई तरीका नहीं है। समस्या यह है कि एक गणना के अंदर प्रतिशत सहित, फ़ॉन्ट-आकार के लिए उपयोग किए जाने वाले प्रतिशत की व्याख्या विरासत के फ़ॉन्ट आकार के रूप में की जाती है, कंटेनर के आकार की नहीं। सीएसएस bwइस उद्देश्य के लिए (बॉक्स-चौड़ाई) नामक एक इकाई का उपयोग कर सकता है, इसलिए आप कह सकते हैं div { font-size: 5bw; }, लेकिन मैंने इस प्रस्तावित को कभी नहीं सुना है।

Comments

ब्राउज़र किस पर काम करता है? मुझे यह फ़ायरफ़ॉक्स में काम करने के लिए नहीं मिल सकता है।

— लोरेफेन

@lorefnon, यह पेज caniuse.com/#feat=viewport-units का कहना है कि यह फ़ायरफ़ॉक्स 19 में काम करेगा , इसका मतलब क्रोम की कोशिश है।

@torazburo, हम्म, ने एफएफ 17.0 में इसकी कोशिश की। ग्रेट बीटीडब्ल्यू, इस तरह से मौजूद कुछ भी पता नहीं था।

— लोरेफेन 6

मैंने एक साथ कम कोड का एक टुकड़ा हैक किया है जो विभिन्न मीडिया प्रश्नों के लिए उपलब्ध जहाँ और जहाँ बैकबैक

— tnajdek

ध्यान दें कि vwव्यूपोर्ट के सापेक्ष, कंटेनर आकार के लिए नहीं। शायद कई मामलों में उपयोगी है, लेकिन svg ने मेरे लिए बेहतर काम किया।

— ज़ेलनिक्स

Answer 3

एक और जे एस विकल्प:

काम करने का उदाहरण

fontsize = function () {
    var fontSize = $("#container").width() * 0.10; // 10% of container width
    $("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);

या जैसा कि torazaburo के उत्तर में कहा गया है कि आप svg का उपयोग कर सकते हैं। मैंने अवधारणा के प्रमाण के रूप में एक सरल उदाहरण दिया:

एसवीजी उदाहरण

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>

Comments

बस एक टिप्पणी, एक नज़र डालें कि 'फ़ायरफ़ॉक्स' कैसे खुलता है और एक .pdf फ़ाइल प्रदर्शित करता है। यह जावास्क्रिप्ट का आकार बदलने वाली सामग्री है। काफी भारी, लेकिन पूरी तरह से काम कर रहा है।

— मिल्के पैटरन

यह पूरी तरह से मेरे लिए काम करता है, अब मुझे सिर्फ पाठ को केंद्र में रखने की आवश्यकता है

— alejandro

Answer 4

मैंने अपने कुछ प्रोजेक्ट्स पर Fittext का इस्तेमाल किया और यह इस तरह की समस्या का एक अच्छा समाधान लगता है।

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

Comments

हां फिटटेक्स्ट सेटअप के लिए बहुत अच्छा और सरल है

— सहायक जोएल

Answer 5

यह सीएसएस फ़ॉन्ट-आकार के साथ पूरा नहीं किया जा सकता है

यह मानते हुए कि "बाहरी कारक" जिसका आप जिक्र कर रहे हैं, मीडिया के प्रश्नों द्वारा उठाया जा सकता है, आप उनका उपयोग कर सकते हैं - समायोजन को पूर्वनिर्धारित आकारों के एक सेट तक सीमित करने की संभावना होगी।

Answer 6

यहाँ समारोह है:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

फिर अपने सभी दस्तावेज़ों को चाइल्ड एलीमेंट के फॉन्ट साइज़ में इम या% में बदलें

फिर आधार फ़ॉन्ट आकार सेट करने के लिए अपने कोड में कुछ इस तरह जोड़ें।

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

Answer 7

मेरे पास एक समान मुद्दा था लेकिन मुझे अन्य मुद्दों पर विचार करना था कि @ apaul34208 उदाहरण से निपटना नहीं था। मेरे मामले में;

• मेरे पास एक कंटेनर है जो मीडिया प्रश्नों का उपयोग करके व्यूपोर्ट के आधार पर आकार बदल गया है
• अंदर पाठ गतिशील रूप से उत्पन्न होता है
• मैं नीचे के साथ-साथ स्केल करना चाहता हूं

उदाहरणों के लिए सबसे सुरुचिपूर्ण नहीं है, लेकिन यह मेरे लिए चाल है। थ्रॉटलिंग का उपयोग करके खिड़की के आकार पर विचार करें ( https://lodash.com/ )

var TextFit = function(){
	var container = $('.container');
  container.each(function(){
    var container_width = $(this).width(),
     	width_offset = parseInt($(this).data('width-offset')),
        font_container = $(this).find('.font-container');
	
     if ( width_offset > 0 ) {
         container_width -= width_offset;
     }
                
    font_container.each(function(){
      var font_container_width = $(this).width(),
          font_size = parseFloat( $(this).css('font-size') );

      var diff = Math.max(container_width, font_container_width) - Math.min(container_width, font_container_width);
 
      var diff_percentage = Math.round( ( diff / Math.max(container_width, font_container_width) ) * 100 );
      
      if (diff_percentage !== 0){
          if ( container_width > font_container_width ) {
            new_font_size = font_size + Math.round( ( font_size / 100 ) * diff_percentage );
          } else if ( container_width < font_container_width ) {
            new_font_size = font_size - Math.round( ( font_size / 100 ) * diff_percentage );
          }
      }
      $(this).css('font-size', new_font_size + 'px');
    });
  });
}

$(function(){
  TextFit();
  $(window).resize(function(){
  	TextFit();
  });
});

.container {
		width:341px;
		height:341px;
		background-color:#000;
		padding:20px;
	}
	.font-container {
		font-size:131px;
		text-align:center;
		color:#fff;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container" data-width-offset="10">
	<span class="font-container">£5000</span>
</div>

https://jsfiddle.net/Merch80/b8hoctfb/7/

Answer 8

मैंने इस उत्तर मेंvw विशिष्ट कंटेनर आकार के संबंध में उपयोग करने का अधिक विस्तृत उत्तर दिया है , इसलिए मैं यहां अपना उत्तर नहीं दूंगा।

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

इसलिए यदि आप 5vwव्यूपोर्ट चौड़ाई के 100% पर एक कंटेनर में आकार चाहते हैं , तो व्यूपोर्ट चौड़ाई में से एक 75%जिसे आप शायद बनना चाहते हैं (5vw * .75) = 3.75vw।

Answer 9

यदि आप तत्व की चौड़ाई के आधार पर इसे स्केल करना चाहते हैं, तो आप इस वेब घटक का उपयोग कर सकते हैं:
https://github.com/pomber/full-width-text

यहां डेमो देखें :
https://pomber.github.io/full-width-text/

उपयोग इस प्रकार है:

<full-width-text>Lorem Ipsum</full-width-text>

Answer 10

आप इस शुद्ध CSS विधि को भी आजमा सकते हैं:

font-size: calc(100% - 0.3em);

Comments

वह काम करने वाला नहीं है। यह सब करता है फ़ॉन्ट आकार अपेक्षाकृत कंटेनर फ़ॉन्ट आकार के लिए सेट है। (माइनस 0.3 एमएम)

— मार्टिज़न शेफ़र