Có thứ gì như là kích thước phông chữ tối thiểu và kích thước phông chữ tối đa không?

Tôi đang cố tạo một phông chữ trong div đáp ứng với cửa sổ trình duyệt. Cho đến nay, nó đã làm việc một cách hoàn hảo, nhưng div cha mẹ có max-widthcủa 525px. Thay đổi kích thước trình duyệt hơn nữa sẽ không làm cho phông chữ ngừng thay đổi kích thước. Điều này khiến tôi tự hỏi liệu có một thứ như vậy min-font-sizehoặc max-font-size, và nếu một thứ như vậy không tồn tại, liệu có cách nào để đạt được điều gì đó tương tự không.

Tôi nghĩ rằng sử dụng tỷ lệ phần trăm tại font-sizesẽ hiệu quả, nhưng bit văn bản sẽ không chia tỷ lệ tương ứng với div mẹ. Đây là những gì tôi có:

CSS cho div mẹ:

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

    width:40%;
    height:450px;

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

    z-index:2;
}

CSS cho đoạn văn bản được đề cập:

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

Tôi đã tìm kiếm khá lâu trên internet, nhưng vô ích.

Không, không có thuộc tính CSS nào cho kích thước phông chữ tối thiểu hoặc tối đa. Các trình duyệt thường có cài đặt cho kích thước phông chữ tối thiểu, nhưng điều đó nằm dưới sự kiểm soát của người dùng, không phải tác giả.

Bạn có thể sử dụng @mediatruy vấn để thực hiện một số cài đặt CSS tùy thuộc vào những thứ như chiều rộng màn hình hoặc cửa sổ. Trong các cài đặt như vậy, bạn có thể đặt kích thước phông chữ thành một giá trị nhỏ cụ thể nếu cửa sổ rất hẹp.

Bạn có thể làm điều đó bằng cách sử dụng một công thức và bao gồm cả chiều rộng khung nhìn.

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

Điều này đặt kích thước phông chữ tối thiểu là 7px và khuếch đại nó lên .5vw tùy thuộc vào chiều rộng khung nhìn.

Chúc may mắn!

Nó hoạt động tốt với CSS.

Tôi đã trải qua các vấn đề tương tự và khắc phục nó như sau.

Sử dụng kích thước "px" cố định cho kích thước tối đa ở chiều rộng cụ thể trở lên. Sau đó, đối với các độ rộng nhỏ hơn khác nhau, hãy sử dụng "vw" tương đối làm tỷ lệ phần trăm của màn hình.

Kết quả bên dưới là nó tự điều chỉnh ở màn hình dưới 960px nhưng giữ nguyên kích thước cố định ở trên. Chỉ là một lời nhắc, đừng quên thêm vào tài liệu html trong tiêu đề:

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

Ví dụ trong 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;
  }
}

Tôi hy vọng nó sẽ giúp ích!

Tôi đến đây hơi muộn, tôi không nhận được nhiều tín nhiệm cho nó, tôi chỉ đang thực hiện một hỗn hợp các câu trả lời bên dưới vì tôi buộc phải làm điều đó cho một dự án.

Vì vậy, để trả lời câu hỏi: Không có cái gọi là thuộc tính CSS này . Tôi không biết tại sao, nhưng tôi nghĩ đó là vì họ sợ bị lạm dụng tài sản này, nhưng tôi không tìm thấy bất kỳ trường hợp sử dụng nào mà nó có thể là một vấn đề nghiêm trọng.

Bất cứ điều gì, các giải pháp là gì?

Hai công cụ sẽ cho phép chúng ta làm điều đó: media queries ans vw property

1) Có một giải pháp "đánh lừa" bao gồm thực hiện truy vấn phương tiện cho mỗi bước chúng tôi thực hiện trong css của mình, thay đổi phông chữ từ một số lượng cố định thành một số lượng cố định khác. Nó hoạt động, nhưng nó rất nhàm chán để làm, và bạn không có một khía cạnh tuyến tính trơn tru.

2) Như MostPitt đã giải thích, có một giải pháp sáng suốt cho cực tiểu:

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

Tối thiểu ở đây sẽ là 7px ngoài 0,5% chiều rộng chế độ xem. Điều đó đã thực sự tuyệt vời và hoạt động trong hầu hết các trường hợp . Nó không yêu cầu bất kỳ truy vấn phương tiện nào, bạn chỉ cần dành một chút thời gian để tìm các tham số phù hợp.

Như bạn đã nhận thấy, nó là một hàm tuyến tính, các phép toán cơ bản cho bạn biết rằng hai điểm đã tìm cho bạn các tham số. Sau đó, chỉ cần sửa kích thước phông chữ bằng px bạn muốn cho màn hình rất lớn và cho phiên bản di động, sau đó tính toán xem bạn muốn thực hiện một phương pháp khoa học. Thiết nghĩ, nó hoàn toàn không cần thiết và bạn chỉ cần cố gắng là được.

3) Giả sử bạn có một khách hàng rất nhàm chán (như tôi), người hoàn toàn muốn tiêu đề chỉ là một dòng và không hơn. Nếu bạn đã sử dụng giải pháp MostPitt, thì bạn sẽ gặp rắc rối vì phông chữ của bạn sẽ tiếp tục phát triển và nếu bạn có vùng chứa chiều rộng cố định (như bootstrap dừng ở 1140px hoặc thứ gì đó trong cửa sổ lớn). Ở đây, tôi khuyên bạn nên sử dụng cả truy vấn phương tiện. Trên thực tế, bạn chỉ có thể tìm thấy kích thước tối đa của px mà bạn có thể xử lý trong vùng chứa của mình trước khi khía cạnh đó trở nên không mong muốn (pxMax). Đây sẽ là mức tối đa của bạn. Sau đó, bạn chỉ cần tìm chiều rộng màn hình chính xác mà bạn phải dừng lại (wMax). (Tôi để bạn nghịch đảo một hàm tuyến tính của riêng bạn).

Sau đó chỉ cần làm

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

Sau đó, nó hoàn toàn tuyến tính và kích thước phông chữ của bạn ngừng phát triển! Lưu ý rằng bạn không cần phải đặt thuộc tính css trước đó của mình (calc ...) trong một truy vấn phương tiện trong wMax vì truy vấn phương tiện được coi là không quan trọng hơn và nó sẽ ghi đè thuộc tính trước đó.

Tôi không nghĩ rằng việc tạo một đoạn mã cho điều này là hữu ích, vì bạn sẽ gặp khó khăn khi đưa nó lên toàn màn hình và xét cho cùng nó không phải là khoa học tên lửa.

Hy vọng điều này có thể giúp ích cho những người khác và đừng quên cảm ơn MostPitt về giải pháp của anh ấy.

Điều này thực sự đang được đề xuất trong CSS4

Bản thảo làm việc tại W3C

Trích dẫn:

Hai thuộc tính này cho phép một trang web hoặc người dùng yêu cầu kích thước phông chữ của một phần tử được kẹp trong phạm vi được cung cấp với hai thuộc tính này. Nếu font-size giá trị được tính toán nằm ngoài giới hạn được tạo bởi font-min-size và font-max-size, thì giá trị sử dụng của font-size được gắn với các giá trị được chỉ định trong hai thuộc tính này.

Điều này thực sự sẽ hoạt động như sau:

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

Điều này có nghĩa là, kích thước phông chữ sẽ bằng 5% chiều rộng của khung nhìn, nhưng không bao giờ nhỏ hơn 10 pixel và không bao giờ lớn hơn 18 pixel.

Thật không may, tính năng này chưa được triển khai ở bất kỳ đâu, (ngay cả trên caniuse.com).

Rucksack rất tuyệt, nhưng bạn không nhất thiết phải dùng đến các công cụ như Gulp hoặc Grunt, v.v.

Tôi đã làm một bản demo bằng cách sử dụng Thuộc tính tùy chỉnh CSS (Biến CSS) để dễ dàng kiểm soát kích thước phông chữ tối thiểu và tối đa.

Như vậy:

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

Tôi đã có một số kết quả suôn sẻ với những thứ này. Nó trôi chảy giữa 3 phạm vi chiều rộng, giống như một chức năng liên tục.

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

Bạn có thể sử dụng Sass để kiểm soát kích thước phông chữ tối thiểu và tối đa. Đây là một giải pháp tuyệt vời của 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);
}

Xin lưu ý rằng việc đặt kích thước phông chữ bằng px không được khuyến khích do lo ngại về khả năng tiếp cận :

"Không thể truy cập xác định kích thước phông chữ bằng px vì người dùng không thể thay đổi kích thước phông chữ trong một số trình duyệt. Ví dụ: người dùng có tầm nhìn hạn chế có thể muốn đặt kích thước phông chữ lớn hơn nhiều so với kích thước do nhà thiết kế web chọn." (xem https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Một cách tiếp cận dễ tiếp cận hơn là đặt font-size: 100%trong html, tôn trọng cài đặt kích thước mặc định của người dùng và SAU ĐÓ sử dụng tỷ lệ phần trăm hoặc đơn vị tương đối khi thay đổi kích thước ( emhoặc rem), chẳng hạn với truy vấn @media.

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

Có, có vẻ như có một số hạn chế bởi một số trình duyệt trong SVG. Developertool giới hạn nó ở 8000px; Ví dụ: Biểu đồ được tạo động sau đây không thành công trong Chrome.

Hãy thử 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>