มีสิ่งต่าง ๆ เช่น min-font-size และ max-font-size หรือไม่?

ฉันพยายามสร้างแบบอักษรใน div ที่ตอบสนองต่อหน้าต่างเบราว์เซอร์ จนถึงตอนนี้มันทำงานได้อย่างสมบูรณ์ แต่ div พาเรนต์มี a max-widthของ525px. การปรับขนาดเบราว์เซอร์เพิ่มเติมจะไม่ทำให้แบบอักษรหยุดปรับขนาด สิ่งนี้ทำให้ฉันสงสัยว่ามีสิ่งนั้นmin-font-sizeหรือmax-font-sizeและถ้าสิ่งนั้นไม่มีอยู่จริงหากมีวิธีที่จะบรรลุสิ่งที่คล้ายกัน

ฉันคิดว่าการใช้เปอร์เซ็นต์font-sizeจะได้ผล แต่บิตของข้อความจะไม่ปรับขนาดตาม div ระดับบนสุด นี่คือสิ่งที่ฉันมี:

CSS สำหรับ div พาเรนต์:

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

    width:40%;
    height:450px;

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

    z-index:2;
}

CSS สำหรับส่วนของข้อความที่เป็นปัญหา:

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

ฉันค้นหาในอินเทอร์เน็ตมาระยะหนึ่งแล้ว แต่ก็ไม่มีประโยชน์

ไม่ไม่มีคุณสมบัติ CSS สำหรับขนาดตัวอักษรขั้นต่ำหรือสูงสุด เบราว์เซอร์มักมีการตั้งค่าสำหรับขนาดแบบอักษรขั้นต่ำ แต่อยู่ภายใต้การควบคุมของผู้ใช้ไม่ใช่ผู้เขียน

คุณสามารถใช้@mediaแบบสอบถามเพื่อตั้งค่า CSS บางอย่างได้โดยขึ้นอยู่กับสิ่งต่างๆเช่นความกว้างของหน้าจอหรือหน้าต่าง ในการตั้งค่าดังกล่าวคุณสามารถกำหนดขนาดตัวอักษรให้เป็นค่าเล็ก ๆ ได้หากหน้าต่างแคบมาก

คุณสามารถทำได้โดยใช้สูตรและรวมความกว้างของวิวพอร์ต

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

ซึ่งจะกำหนดขนาดแบบอักษรขั้นต่ำที่ 7px และขยายขนาด. 5vw ขึ้นอยู่กับความกว้างของวิวพอร์ต

โชคดี!

ทำงานได้ดีกับ CSS

ฉันประสบปัญหาเดียวกันและได้รับการแก้ไขดังต่อไปนี้

ใช้ขนาด "px" คงที่สำหรับขนาดสูงสุดที่ความกว้างเฉพาะขึ้นไป จากนั้นสำหรับความกว้างที่เล็กกว่าอื่นให้ใช้ "vw" สัมพัทธ์เป็นเปอร์เซ็นต์ของหน้าจอ

ผลลัพธ์ด้านล่างคือมันปรับตัวเองที่หน้าจอต่ำกว่า 960px แต่คงขนาดคงที่ไว้ด้านบน ขอเตือนอย่าลืมเพิ่ม html doc ในส่วนหัว:

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

ฉันหวังว่ามันจะช่วยได้!

ฉันมาช้าไปหน่อยที่นี่ฉันไม่ได้รับเครดิตมากขนาดนั้นฉันแค่ทำคำตอบด้านล่างผสมกันเพราะฉันถูกบังคับให้ทำอย่างนั้นสำหรับโครงการ

ดังนั้นเพื่อตอบคำถาม: ไม่มีสิ่งดังกล่าวเป็นทรัพย์สิน CSS นี้อยู่ ฉันไม่รู้ว่าทำไม แต่ฉันคิดว่าเป็นเพราะพวกเขากลัวว่าจะมีการนำคุณสมบัตินี้ไปใช้ในทางที่ผิด แต่ฉันไม่พบกรณีการใช้งานที่อาจเป็นปัญหาร้ายแรงได้

อะไรคือวิธีแก้ปัญหา?

เครื่องมือสองอย่างที่จะช่วยให้เราทำสิ่งนั้นได้: แบบสอบถามสื่อ ans คุณสมบัติ vw

1) มีโซลูชัน "คนโง่" ซึ่งประกอบไปด้วยการสร้างแบบสอบถามสื่อสำหรับทุกขั้นตอนที่เราต้องการใน css ของเราเปลี่ยนแบบอักษรจากจำนวนคงที่เป็นจำนวนคงที่ มันใช้งานได้ แต่มันน่าเบื่อมากที่ต้องทำและคุณไม่มีลักษณะเชิงเส้นที่ราบรื่น

2) ตามที่ AlmostPitt อธิบายไว้มีวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับ minima:

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

ขั้นต่ำที่นี่จะเป็น 7px นอกเหนือจาก 0.5% ของความกว้างมุมมอง ที่มีอยู่แล้วจริงๆเย็นและการทำงานในส่วนของคดี ไม่จำเป็นต้องมีการสืบค้นสื่อใด ๆ คุณเพียงแค่ใช้เวลาในการค้นหาพารามิเตอร์ที่เหมาะสม

อย่างที่คุณสังเกตเห็นว่ามันเป็นฟังก์ชันเชิงเส้นคณิตศาสตร์พื้นฐานจะเรียนรู้ว่าจุดสองจุดพบว่าคุณเป็นพารามิเตอร์แล้ว จากนั้นแก้ไขขนาดตัวอักษรเป็น px ที่คุณต้องการสำหรับหน้าจอขนาดใหญ่มากและสำหรับเวอร์ชันมือถือจากนั้นคำนวณว่าคุณต้องการใช้วิธีการทางวิทยาศาสตร์หรือไม่ คิดว่ามันไม่จำเป็นอย่างยิ่งและคุณสามารถทำได้โดยพยายาม

3) สมมติว่าคุณมีลูกค้าที่น่าเบื่อมาก (เช่นฉัน) ที่ต้องการให้ชื่อเป็นบรรทัดเดียวและไม่มีอีกต่อไป หากคุณใช้วิธีการแก้ปัญหา AlmostPitt แสดงว่าคุณมีปัญหาเพราะแบบอักษรของคุณจะเติบโตขึ้นเรื่อย ๆ และถ้าคุณมีคอนเทนเนอร์ที่มีความกว้างคงที่ (เช่น bootstrap หยุดที่ 1140px หรือบางอย่างในหน้าต่างบานใหญ่) ที่นี่ฉันขอแนะนำให้คุณใช้แบบสอบถามสื่อด้วย ในความเป็นจริงคุณสามารถค้นหาจำนวนสูงสุดของขนาด px ที่คุณสามารถจัดการได้ในคอนเทนเนอร์ของคุณก่อนที่ขนาดจะไม่ต้องการ (pxMax) นี่จะเป็นค่าสูงสุดของคุณ จากนั้นคุณต้องหาความกว้างของหน้าจอที่แน่นอนที่คุณต้องหยุด (wMax) (ฉันให้คุณผกผันฟังก์ชันเชิงเส้นด้วยตัวคุณเอง)

หลังจากนั้นก็ทำ

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

จากนั้นมันจะเป็นเส้นตรงอย่างสมบูรณ์แบบและขนาดตัวอักษรของคุณจะหยุดเติบโต โปรดสังเกตว่าคุณไม่จำเป็นต้องใส่คุณสมบัติ css ก่อนหน้าของคุณ (calc ... ) ในคิวรีสื่อภายใต้ wMax เนื่องจากคิวรีสื่อถือว่าไม่สำคัญมากกว่าและจะเขียนทับคุณสมบัติก่อนหน้า

ฉันไม่คิดว่าจะมีประโยชน์ในการสร้างตัวอย่างสำหรับสิ่งนี้เนื่องจากคุณจะมีปัญหาในการทำให้เป็นหน้าจอทั้งหมดและไม่ใช่วิทยาศาสตร์จรวดโดยรวม

หวังว่านี่จะช่วยคนอื่นได้และอย่าลืมขอบคุณเกือบPittสำหรับวิธีแก้ปัญหาของเขา

สิ่งนี้ถูกเสนอใน CSS4

ร่างการทำงานที่ W3C

อ้าง:

คุณสมบัติทั้งสองนี้ช่วยให้เว็บไซต์หรือผู้ใช้ต้องการขนาดตัวอักษรขององค์ประกอบเพื่อยึดไว้ภายในช่วงที่ให้มาพร้อมกับคุณสมบัติทั้งสองนี้ ถ้าขนาดฟอนต์ของค่าที่คำนวณอยู่นอกขอบเขตที่สร้างขึ้นโดย font-min-size และ font-max-size ค่าการใช้ขนาดฟอนต์จะถูกยึดกับค่าที่ระบุในคุณสมบัติทั้งสองนี้

สิ่งนี้จะใช้งานได้จริงดังต่อไปนี้:

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

นี่หมายความว่าขนาดตัวอักษรจะเท่ากับ 5% ของความกว้างของวิวพอร์ต แต่ต้องไม่เล็กกว่า 10 พิกเซลและไม่ใหญ่กว่า 18 พิกเซล

น่าเสียดายที่ฟีเจอร์นี้ยังไม่สามารถใช้งานได้ทุกที่ (ยังไม่ได้ใช้ใน caniuse.com)

Rucksack นั้นยอดเยี่ยม แต่คุณไม่จำเป็นต้องใช้เครื่องมือสร้างเช่น Gulp หรือ Grunt เป็นต้น

ฉันทำการสาธิตโดยใช้คุณสมบัติที่กำหนดเองของ CSS (ตัวแปร CSS) เพื่อควบคุมขนาดตัวอักษรขั้นต่ำและสูงสุดได้อย่างง่ายดาย

ชอบมาก:

* {
  /* 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);
}

ฉันได้ผลลัพธ์ที่ราบรื่นกับสิ่งเหล่านี้ มันไหลอย่างราบรื่นระหว่างช่วงความกว้าง 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;
    }
}

คุณสามารถใช้ Sass เพื่อควบคุมขนาดตัวอักษรขั้นต่ำและสูงสุด นี่คือทางออกที่ยอดเยี่ยมโดย Eduardo Boucas

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

โปรดทราบว่าการตั้งค่าแบบอักษรขนาดกับ px ไม่แนะนำเนื่องจากความกังวลการเข้าถึง :

"การกำหนดขนาดตัวอักษรเป็น px ไม่สามารถเข้าถึงได้เนื่องจากผู้ใช้ไม่สามารถเปลี่ยนขนาดตัวอักษรในบางเบราว์เซอร์ได้ตัวอย่างเช่นผู้ใช้ที่มีวิสัยทัศน์ จำกัด อาจต้องการกำหนดขนาดแบบอักษรให้ใหญ่กว่าขนาดที่นักออกแบบเว็บไซต์เลือกไว้มาก" (ดูhttps://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

วิธีการที่สามารถเข้าถึงได้มากขึ้นคือการตั้งค่าfont-size: 100%ใน html ซึ่งเป็นไปตามการตั้งค่าขนาดเริ่มต้นของผู้ใช้และจากนั้นใช้เปอร์เซ็นต์หรือหน่วยสัมพัทธ์เมื่อปรับขนาด ( emหรือrem) ตัวอย่างเช่นด้วยแบบสอบถาม @media

(ดูhttps://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )

ใช่ดูเหมือนว่าเบราว์เซอร์บางตัวจะมีข้อ จำกัด ใน SVG เครื่องมือพัฒนา จำกัด ไว้ที่ 8000px; แผนภูมิที่สร้างขึ้นแบบไดนามิกต่อไปนี้ล้มเหลวเช่นใน Chrome

ลอง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>

CSS min () และ max () มีอัตราการใช้งานที่ค่อนข้างดีในปี 2020

โค้ดด้านล่างใช้ max () เพื่อให้ได้ [variablevalue] และ [minimumvalue] มากที่สุดจากนั้นจึงส่งผ่านค่านั้นไปยัง min () เทียบกับ [maximumvalue] เพื่อให้ได้ค่าที่น้อยกว่าของทั้งสอง สิ่งนี้จะสร้างช่วงแบบอักษรที่อนุญาต (3.5rem ต่ำสุด 6.5rem คือสูงสุด 6vw จะใช้เมื่ออยู่ระหว่างนั้นเท่านั้น)

font-size: min(max([variablevalue], [minimumvalue]), [maximumvalue]);
font-size: min(max(6vw, 3.5rem), 6.5rem);

ฉันใช้สิ่งนี้โดยเฉพาะกับ font-awesome เป็นไอคอนเล่นวิดีโอบนรูปภาพภายในองค์ประกอบคอนเทนเนอร์ bootstrap ที่ตั้งค่าความกว้างสูงสุด