CSS में min-font-size कैसे सेट करें

Question

मैं अपने HTML पृष्ठ के प्रत्येक तत्व के लिए एक न्यूनतम फ़ॉन्ट आकार सेट करना चाहता हूं।

उदाहरण के लिए यदि फ़ॉन्ट-आकार के साथ तत्व कम हैं तो 12px, फिर वे बदलकर 12px हो जाएंगे।
लेकिन अगर फ़ॉन्ट-आकार के grater के साथ तत्व हैं, तो 12px, वे नहीं बदलेंगे।

क्या सीएसएस के साथ ऐसा करने का कोई तरीका है?

Answer 1

जब आप संपत्ति bodyका उपयोग करने पर आधार फ़ॉन्ट आकार सेट कर सकते font-sizeहैं, उसके बाद एक छोटा आकार निर्दिष्ट करने वाला कुछ भी उस तत्व के लिए आधार नियम को ओवरराइड करेगा। आप जो करना चाह रहे हैं उसे करने के लिए आपको जावास्क्रिप्ट का उपयोग करना होगा।

आप पृष्ठ पर तत्वों के माध्यम से पुनरावृति कर सकते हैं और इस तरह से कुछ का उपयोग करके छोटे फोंट बदल सकते हैं:

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

यहाँ एक फिडेल है जहाँ आप इसे पूरा कर सकते हैं: http://jsfiddle.net/mifi79/LfdL8/2/

Comments

वहाँ एक सरल तरीका है कि 12 के साथ jQuery तत्वों के साथ कम है तो 12px?

— nrofis

@nrofis - यकीन है, ऊपर मेरे जवाब के लिए संपादित देखें। चीयर्स!

— मफी

एक पृष्ठ पर सभी तत्वों को बदलना और एक सीएसएस संपत्ति को बदलना प्रदर्शन के बिंदु से वास्तव में बुरा विचार जैसा लगता है। मैं उस विशेषज्ञ के बारे में नहीं हूँ जो प्रतिक्षेपकों को चलाता है लेकिन आप अनजाने में इस दृष्टिकोण के साथ पृष्ठ को बहुत अधिक परिशोधित कर सकते हैं। मैं इस दृष्टिकोण की सिफारिश नहीं करता हूं।

— अवंद अमीरी

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

— दुवेद

@ AndersLindén उस मामले में, मीडिया क्वेरी में न्यूनतम फ़ॉन्ट आकार सेट करें, उदाहरण के लिए, यदि आप नहीं चाहते कि आपका फ़ॉन्ट आकार 10px से नीचे जाए: p{ font-size: 1vw } @media (max-width: 1000px){ p{ font-size: 10px } }

— nHaskins

Answer 2

CSS3 में उसके लिए एक सरल लेकिन शानदार हैक है:

font-size:calc(12px + 1.5vw);

ऐसा इसलिए है क्योंकि कैल्क () का स्थैतिक हिस्सा न्यूनतम को परिभाषित करता है। भले ही गतिशील हिस्सा 0 के पास कुछ सिकुड़ जाए।

Comments

शानदार हैक!

मैं तुमसे प्यार करता हूँ। यह कमाल का है।

— ल्यूक टेलर

@StefanSteiger, आप इसके लिए मीडिया क्वेश्चन का उपयोग कर सकते हैं: (ए) मीडिया (अधिकतम-चौड़ाई: 610 पीएक्स) ...

— एडम

प्रतिभाशाली! बिल्कुल वही जो मुझे चाहिए था। धन्यवाद!

— स्पेडली

हालांकि यह एक अच्छा हैक है, मैं कहूंगा कि यह वास्तव में एक समाधान नहीं है क्योंकि यह फ़ॉन्ट-आकार को प्रभावित करता है जब आकार न्यूनतम से ऊपर होता है, इसलिए आपको 12pxहर समय उस अतिरिक्त (इस मामले में) के साथ रखना होगा ।

— टॉम वायली

Answer 3

दिसंबर 2019 के मध्य तक, CSS4 मिनट / अधिकतम-फ़ंक्शन ठीक वही है जो आप चाहते हैं:
(देखभाल के साथ चलना, यह बहुत नया है, पुराने ब्राउज़र (उर्फ IE & msEdge) अभी तक इसका समर्थन नहीं करते हैं)
(समर्थित के रूप में) क्रोमियम 79 और फ़ायरफ़ॉक्स v75)

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max

उदाहरण:

blockquote {
    font-size: max(1em, 12px);
}

इस तरह फ़ॉन्ट-आकार 1em (यदि 1em> 12px) होगा, लेकिन कम से कम 12px।

दुर्भाग्य से यह भयानक CSS3 सुविधा अभी तक किसी भी ब्राउज़र द्वारा समर्थित नहीं है, लेकिन मुझे उम्मीद है कि यह जल्द ही बदल जाएगा!

संपादित करें:

यह CSS3 का हिस्सा हुआ करता था, लेकिन तब इसे CSS4 के लिए फिर से शेड्यूल किया गया था।
के अनुसार दिसंबर 11 वीं 2019 , समर्थन क्रोम / क्रोमियम में पहुंचे 79 (Android पर शामिल है, और Android WebView में), और इस तरह के रूप में भी माइक्रोसॉफ्ट Chredge में ओपेरा 66 और सफारी 11.1 सहित Anaheim उर्फ (incl। IOS)

Comments

गंभीरता से, क्यों मानक समितियाँ हमेशा उस सामान को हटाती हैं जो वास्तव में मेरे काम को करने योग्य बना देगा!

— माइकल

@Michael, CSS WG सामान को ज्यादातर इसलिए हटाता है क्योंकि कार्यान्वयनकर्ता की रुचि या प्राथमिकता का अभाव है। अंतिम W3C अनुशंसा में CSS सुविधा प्राप्त करने के लिए इसे दो स्वतंत्र कार्यान्वयनों की आवश्यकता होती है। कागज लिखने का कोई मतलब नहीं है और कोई भी इसे वास्तविक विश्व सॉफ्टवेयर में धकेलना चाहता है। तो आपको ब्राउज़र विक्रेताओं से पूछना चाहिए ...

— jj

शानदार खोज! मिनट / अधिकतम सेट करने के लिए सीएसएस चर के साथ उपयोग कर सकते हैं। उदाहरण: :root { --responsive-font-size-primary: min(2em, max(0.5em, 5vmin)); }उपयोग को सरल बनाना:font-size: var(--responsive-font-size-primary);

— कोरी एलिक्स

@ कोरी एलिक्स: कूल, बस इसके लिए देखा गया समर्थन 11 दिसंबर, 2019 के अनुसार आ गया है। थ्रेड विथ केयर, सभी गैर-क्रोमियम आधारित ब्राउज़र अभी तक इसका समर्थन नहीं करते हैं। लेकिन क्रोम में इसके लिए समर्थन बहुत अच्छी खबर है।

— स्टीफन स्टीगर

@ माइकल: अच्छी खबर - अब यह लागू हो गया है! (प्रति मध्य दिसंबर 2019)

— स्टीफन स्टीगर

Answer 4

ऐसा लगता है कि मैं थोड़ा लेट हो गया हूं, लेकिन इस अंक वाले अन्य लोगों के लिए यह कोड आज़माएं

p { font-size: 3vmax; }

आप जो भी टैग पसंद करते हैं उसका आकार और पसंद का उपयोग करें (3 बदलें)

p { font-size: 3vmin; }

अधिकतम आकार के लिए उपयोग किया जाता है।

Comments

vmax और vmin का उपयोग वास्तव में दृष्टिकोण / पृष्ठ आकार के सापेक्ष मूल्यों को निर्दिष्ट करने के लिए किया जाता है। न्यूनतम और अधिकतम व्यूपोर्ट के न्यूनतम और अधिकतम व्यूपोर्ट का न्यूनतम या अधिकतम नहीं है - जो कि ऑप से पूछ रहा था। (उदाहरण यदि ऊंचाई vmax की तुलना में व्यूपोर्ट की चौड़ाई से अधिक है, तो 100vmax = व्यूपोर्ट की ऊंचाई और 100vmin = व्यूपोर्ट की चौड़ाई के बराबर है)

— Chaim

Answer 5

मीडिया क्वेरी का उपयोग करें। उदाहरण: यह कुछ ऐसा है जो मूल आकार का उपयोग करके 1.0vw है, लेकिन जब यह 1000 हिट करता है तो पत्र बहुत छोटा हो जाता है इसलिए मैं इसे बड़ा कर देता हूं

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

यह साइट जिस पर मैं काम कर रहा हूं वह> 500px के लिए उत्तरदायी नहीं है, लेकिन आपको इसकी अधिक आवश्यकता हो सकती है। इस समाधान के लिए समर्थक, लाभ यह है कि आप सुपर मिनी अक्षरों के बिना फ़ॉन्ट आकार स्केलिंग रखते हैं और आप इसे js मुक्त रख सकते हैं।

Comments

उ ह। यह तत्व को विंडो के रिज़ॉल्यूशन में बाँधता है, है ना? जिसका अर्थ है कि सामान्य तौर पर आपको पृष्ठ पर प्रत्येक तत्व के लिए एक अलग मीडिया क्वेरी की आवश्यकता होगी।

— माइकल

Answer 6

CSS में एक क्लैंप () फ़ंक्शन है जो ऊपरी और निचले बाउंड के बीच मान रखता है। क्लैंप () फ़ंक्शन परिभाषित न्यूनतम और अधिकतम मानों के बीच मानों की श्रेणी में मध्य मान के चयन को सक्षम करता है।

यह केवल तीन आयाम लेता है:

1. न्यूनतम मूल्य।
2. सामग्री सूचीबद्ध करें
3. पसंदीदा मान अधिकतम अनुमत मूल्य।

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

$(window).resize(function(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

Answer 7

सीएसएस समाधान:

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

बस अगर मामले में कुछ मिश्रण की जरूरत है:

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

Answer 8

AFAIK यह सादे सीएसएस के साथ संभव नहीं है,
लेकिन आप बहुत महंगा jQuery ऑपरेशन कर सकते हैं जैसे:

jsBin डेमो

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

_{ग्लोबल चयनकर्ता का उपयोग करने के बजाय *मैं आपको (यदि संभव हो तो) अपने चयनकर्ताओं के साथ अधिक विशिष्ट होने का सुझाव दूंगा।}

Answer 9

font-min-sizeऔर font-max-sizeसीएसएस गुण थे हटाया सीएसएस फ़ॉन्ट्स मॉड्यूल स्तर 4 विनिर्देश (और ब्राउज़र AFAIK में लागू नहीं) से। और CSS वर्किंग ग्रुप ने CSS उदाहरणों की जगह ले ली, font-size: clamp(...)जिनके पास अभी तक का सबसे बड़ा ब्राउज़र समर्थन नहीं है, इसलिए हमें ब्राउज़रों को इसका समर्थन करने के लिए इंतजार करना होगा। Https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples में उदाहरण देखें ।

Answer 10

आपकी उपरोक्त टिप्पणी को देखते हुए, आप ठीक हैं jQuery के साथ यह कर रहे हैं - यहाँ जाता है:

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

ऐसा करने का एक साफ तरीका यह हो सकता है कि आपके CSS में "min-font" वर्ग हो, जो font-size: 12px सेट करता हो, और इसके बजाय केवल कक्षा जोड़ें:

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});

Answer 11

यह पूरी तरह से 50px के साथ काम करेगा। जो स्थैतिक के रूप में कार्य करेगा और इस प्रकार न्यूनतम-चौड़ाई के रूप में कार्य करेगा।

font-size: calc(50px + 5vw);