क्या माइन-फॉन्ट-साइज़ और मैक्स-फॉन्ट-साइज़ जैसी कोई चीज़ है?

Question 1

मैं ब्राउज़र विंडो के लिए एक विभाजक में एक फ़ॉन्ट बनाने की कोशिश कर रहा हूँ। अब तक, यह पूरी तरह से काम किया है, लेकिन माता-पिता के तलाक का एक max-widthहै 525px। ब्राउज़र का आकार बदलने से फ़ॉन्ट का आकार बदलना बंद नहीं होगा। इसने मुझे आश्चर्यचकित कर दिया है कि क्या ऐसा कुछ है min-font-sizeया max-font-size, और यदि ऐसा कुछ मौजूद नहीं है, अगर ऐसा ही कुछ हासिल करना है।

मैंने सोचा था कि प्रतिशत का उपयोग करने से font-sizeकाम चल जाएगा, लेकिन मूल पाठ के अनुसार पाठ का थोड़ा भी पैमाना नहीं होगा। यहाँ मेरे पास क्या है:

माता-पिता के लिए सीएसएस div:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

विचाराधीन पाठ के टुकड़े के लिए सीएसएस:

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

मैंने इंटरनेट पर काफी समय तक खोज की, लेकिन कोई फायदा नहीं हुआ।

Question 2

नहीं, न्यूनतम या अधिकतम फ़ॉन्ट आकार के लिए कोई सीएसएस संपत्ति नहीं है। ब्राउज़रों में अक्सर न्यूनतम फ़ॉन्ट आकार की सेटिंग होती है, लेकिन यह उपयोगकर्ता के नियंत्रण में होता है, न कि लेखक के लिए।

आप स्क्रीन या विंडो की चौड़ाई जैसी चीजों के आधार पर कुछ सीएसएस सेटिंग्स बनाने के लिए @mediaप्रश्नों का उपयोग कर सकते हैं । ऐसी सेटिंग्स में, आप उदाहरण के लिए फ़ॉन्ट आकार को एक विशिष्ट छोटे मान पर सेट कर सकते हैं यदि विंडो बहुत संकीर्ण है।

Question 3

आप इसे एक सूत्र का उपयोग करके और व्यूपोर्ट चौड़ाई सहित कर सकते हैं।

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

यह न्यूनतम फ़ॉन्ट आकार 7px पर सेट करता है और व्यूपोर्ट चौड़ाई के आधार पर इसे 5vw बढ़ाता है।

सौभाग्य!

Question 4

यह सीएसएस के साथ अच्छी तरह से काम करता है।

मैं उन्हीं मुद्दों से गुज़रा और इसे फॉलो किया।

किसी विशिष्ट चौड़ाई और ऊपर के अधिकतम आकार के लिए एक निश्चित "px" आकार का उपयोग करें। फिर विभिन्न छोटी चौड़ाई के लिए, स्क्रीन के प्रतिशत के रूप में एक रिश्तेदार "vw" का उपयोग करें।

नीचे परिणाम यह है कि यह 960px नीचे की स्क्रीन पर खुद को समायोजित करता है, लेकिन ऊपर एक निश्चित आकार रखता है। बस एक अनुस्मारक, हेडर में html डॉक्टर में जोड़ना न भूलें:

<meta name="viewport" content="width=device-width">

CSS में उदाहरण:

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

मुझे आशा है कि यह मदद करेगा!

Question 5

मैं यहाँ थोड़ी देर से आ रहा हूँ, मुझे इसके लिए उतना श्रेय नहीं मिल रहा है, मैं नीचे दिए गए उत्तरों का मिश्रण कर रहा हूँ क्योंकि मुझे एक परियोजना के लिए ऐसा करने के लिए मजबूर किया गया था।

तो सवाल का जवाब देने के लिए: इस सीएसएस संपत्ति जैसी कोई चीज नहीं है । मुझे पता नहीं क्यों, लेकिन मुझे लगता है कि यह इसलिए है क्योंकि वे इस संपत्ति के दुरुपयोग से डरते हैं, लेकिन मुझे कोई उपयोग मामला नहीं मिलता है जहां यह एक गंभीर समस्या हो सकती है।

जो भी हो, समाधान क्या हैं?

: दो उपकरण हमें ऐसा करने की अनुमति देगा मीडिया क्वेरी ans VW संपत्ति

1) हमारे सीएसएस में हर कदम के लिए एक मीडिया क्वेरी बनाने में एक "मूर्ख" समाधान है, जो एक निश्चित राशि से फ़ॉन्ट को दूसरी निश्चित राशि में बदलता है। यह काम करता है, लेकिन यह करने के लिए बहुत उबाऊ है, और आपके पास एक चिकनी रैखिक पहलू नहीं है।

2) जैसा कि ऑलमोस्ट पिट ने समझाया, मिनीमा के लिए एक शानदार समाधान है:

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

यहाँ न्यूनतम चौड़ाई चौड़ाई के 0.5% के अतिरिक्त 7px होगी। यह वास्तव में पहले से ही शांत है और ज्यादातर मामलों में काम कर रहा है । इसके लिए किसी भी मीडिया क्वेरी की आवश्यकता नहीं है, आपको बस कुछ समय बिताने के लिए सही पैरामीटर खोजना होगा।

जैसा कि आपने देखा कि यह एक रैखिक कार्य है, बुनियादी गणित आपको सीखते हैं कि दो बिंदु पहले से ही आपको पैरामीटर पाते हैं। फिर बस px में फ़ॉन्ट-आकार को ठीक करें जिसे आप बहुत बड़ी स्क्रीन और मोबाइल संस्करण के लिए चाहते हैं, फिर गणना करें कि क्या आप एक वैज्ञानिक विधि करना चाहते हैं। सोचा, यह बिल्कुल आवश्यक नहीं है और आप बस कोशिश करके जा सकते हैं।

3) मान लीजिए कि आपके पास एक बहुत उबाऊ ग्राहक है (मेरे जैसा) जो बिल्कुल एक शीर्षक एक पंक्ति और अधिक नहीं चाहता है। यदि आपने आल्टीडिप्ट समाधान का उपयोग किया है, तो आप परेशानी में हैं क्योंकि आपका फ़ॉन्ट बढ़ता रहेगा, और यदि आपके पास एक निश्चित चौड़ाई का कंटेनर (जैसे बूटस्ट्रैप 1140px पर रोकना या बड़ी खिड़कियों में कुछ)। यहां मैं आपको एक मीडिया क्वेरी का उपयोग करने का सुझाव देता हूं। वास्तव में आप बस px के आकार का अधिकतम पता लगा सकते हैं, इससे पहले कि आप अवांछित हो जाएं (pxMax)। यह आपकी अधिकतम होगी। फिर आपको बस सटीक स्क्रीन चौड़ाई ढूंढनी होगी जिसे आपको रोकना होगा (wMax)। (मैं आपको अपने दम पर एक रैखिक समारोह उलटा करने देता हूं)।

उसके बाद बस करो

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

फिर यह पूरी तरह से रेखीय है और आपका फॉन्ट-साइज़ बढ़ना बंद हो गया है! ध्यान दें कि आपको अपनी पिछली css प्रॉपर्टी (calc ...) को wMax के तहत मीडिया क्वेरी में डालने की आवश्यकता नहीं है क्योंकि मीडिया क्वेरी को अधिक इम्पोर्टेन्ट माना जाता है और यह पिछली प्रॉपर्टी को ओवरराइट कर देगा।

मुझे नहीं लगता कि इसके लिए एक स्निपेट बनाना उपयोगी है, क्योंकि आपको इसे पूरे स्क्रीन पर बनाने में परेशानी होगी और यह रॉकेट विज्ञान के बाद नहीं है।

आशा है कि यह दूसरों की मदद कर सकता है, और उसके समाधान के लिए फ़ॉरेस्टपिट को धन्यवाद देना न भूलें।

Question 6

यह वास्तव में CSS4 में प्रस्तावित किया जा रहा है

डब्लू 3 सी पर काम कर रहे ड्राफ्ट

उद्धरण:

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

यह वास्तव में निम्नलिखित के रूप में काम करेगा:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

इसका शाब्दिक अर्थ होगा, व्यूपोर्ट का आकार व्यूपोर्ट की चौड़ाई का 5% होगा, लेकिन कभी 10 पिक्सेल से छोटा नहीं होगा, और कभी भी 18 पिक्सेल से बड़ा नहीं होगा।

दुर्भाग्य से, यह सुविधा अभी तक कहीं भी लागू नहीं की गई है, (caniuse.com पर भी नहीं)।

Question 7

रूकसैक शानदार है, लेकिन आपको जरूरी नहीं है कि गुलप या ग्रंट आदि जैसे उपकरणों का निर्माण किया जाए।

मैंने आसानी से न्यूनतम और अधिकतम फ़ॉन्ट आकार को नियंत्रित करने के लिए सीएसएस कस्टम गुण (सीएसएस चर) का उपयोग करके एक डेमो बनाया ।

इस तरह:

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Question 8

मुझे इनके साथ कुछ सहज परिणाम मिले। यह 3 चौड़ाई की सीमाओं के बीच आसानी से बहता है, जैसे एक सतत टुकड़ा कार्य।

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}

Question 9

आप मिनट और अधिकतम फ़ॉन्ट आकारों को नियंत्रित करने के लिए सैस का उपयोग कर सकते हैं। यहाँ एडुआर्डो बुकास द्वारा एक शानदार समाधान है।

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

@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;
}

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}

Question 10

कृपया ध्यान दें कि पहुँच संबंधी चिंताओं के कारण px के साथ फॉन्ट-साइज़िंग की सिफारिश नहीं की जाती है :

"px में फ़ॉन्ट आकार को परिभाषित करना सुलभ नहीं है, क्योंकि उपयोगकर्ता कुछ ब्राउज़रों में फ़ॉन्ट का आकार नहीं बदल सकता है। उदाहरण के लिए, सीमित दृष्टि वाले उपयोगकर्ता वेब डिज़ाइनर द्वारा चुने गए आकार की तुलना में फ़ॉन्ट आकार को बहुत बड़ा सेट करना चाह सकते हैं।" (देखें https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

font-size: 100%एचटीएमएल में एक अधिक सुलभ दृष्टिकोण सेट करना है, जो उपयोगकर्ता डिफ़ॉल्ट आकार सेटिंग्स का सम्मान करता है , और जब आकार ( emया rem) का उपयोग करके प्रतिशत या रिश्तेदार इकाइयों का उपयोग करता है , उदाहरण के लिए @media क्वेरी के साथ।

(देखें https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )

Question 11

हां, एसवीजी में कुछ ब्राउज़र द्वारा कुछ प्रतिबंध हैं। डिवेलप्टरूल ने इसे 8000px तक सीमित कर दिया है; क्रोम में उदाहरण के लिए निम्नलिखित गतिशील रूप से उत्पन्न चार्ट विफल रहता है।

Http://www.xn--dddelei-n2a.de/2018/test-von-svt/ आज़माएं

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>