Apakah ada yang namanya min-font-size dan max-font-size?

Saya mencoba membuat font di div responsif terhadap jendela browser. Sejauh ini, ini telah bekerja dengan sempurna, tetapi div induk memiliki max-widthdari 525px. Mengubah ukuran browser lebih lanjut tidak akan membuat font berhenti mengubah ukuran. Hal ini membuat saya bertanya-tanya apakah ada yang namanya min-font-sizeatau max-font-size, dan jika hal seperti itu tidak ada, apakah ada cara untuk mencapai sesuatu yang serupa.

Saya pikir menggunakan persentase di font-sizeakan berhasil, tetapi sedikit teks tidak akan diskalakan sesuai dengan div induk. Inilah yang saya miliki:

CSS untuk div induk:

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

    width:40%;
    height:450px;

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

    z-index:2;
}

CSS untuk bagian teks yang dimaksud:

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

Saya telah mencari cukup lama di internet, tetapi tidak berhasil.

Tidak, tidak ada properti CSS untuk ukuran font minimum atau maksimum. Browser sering kali memiliki pengaturan untuk ukuran font minimum, tetapi itu di bawah kendali pengguna, bukan penulis.

Anda dapat menggunakan @mediakueri untuk membuat beberapa pengaturan CSS tergantung pada hal-hal seperti layar atau lebar jendela. Dalam pengaturan seperti itu, Anda dapat misalnya mengatur ukuran font ke nilai kecil tertentu jika jendelanya sangat sempit.

Anda bisa melakukannya dengan menggunakan rumus dan menyertakan lebar viewport.

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

Ini menetapkan ukuran font minimum pada 7px dan memperkuatnya sebesar .5vw tergantung pada lebar viewport.

Semoga berhasil!

Ini bekerja dengan baik dengan CSS.

Saya mengalami masalah yang sama dan memperbaikinya sebagai berikut.

Gunakan ukuran tetap "px" untuk ukuran maksimum dengan lebar tertentu ke atas. Kemudian untuk lebar lebih kecil yang berbeda, gunakan "vw" relatif sebagai persentase layar.

Hasil di bawah ini adalah menyesuaikan dirinya sendiri pada layar di bawah 960px tetapi mempertahankan ukuran tetap di atas. Sekadar pengingat, jangan lupa menambahkan di doc html di header:

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

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

Saya harap ini akan membantu!

Saya datang sedikit terlambat di sini, saya tidak mendapatkan banyak pujian untuk itu, saya hanya melakukan campuran jawaban di bawah ini karena saya dipaksa melakukannya untuk sebuah proyek.

Jadi untuk menjawab pertanyaan: Tidak ada yang namanya properti CSS ini . Saya tidak tahu mengapa, tapi saya pikir itu karena mereka takut disalahgunakan atas properti ini, tapi saya tidak menemukan kasus penggunaan yang bisa menjadi masalah serius.

Terserah, apa solusinya?

Dua alat akan memungkinkan kita untuk melakukan itu: Media query ans properti vw

1) Ada solusi "bodoh" yang terdiri dari membuat kueri media untuk setiap langkah yang kita lakukan di css, mengubah font dari jumlah tetap ke jumlah tetap lainnya. Ini berfungsi, tetapi sangat membosankan untuk dilakukan, dan Anda tidak memiliki aspek linier yang mulus.

2) Seperti yang dijelaskan AlmostPitt, ada solusi cemerlang untuk minimal:

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

Minimum di sini adalah 7px selain 0,5% dari lebar tampilan. Itu sudah sangat keren dan berfungsi di banyak kasus . Ini tidak memerlukan kueri media apa pun, Anda hanya perlu meluangkan waktu untuk menemukan parameter yang tepat.

Seperti yang Anda perhatikan, ini adalah fungsi linier, matematika dasar memberi tahu Anda bahwa dua titik sudah menemukan parameternya untuk Anda. Kemudian perbaiki ukuran font dalam px yang Anda inginkan untuk layar yang sangat besar dan untuk versi seluler, kemudian hitung jika Anda ingin melakukan metode ilmiah. Pikir, itu sama sekali tidak perlu dan Anda bisa pergi dengan mencoba.

3) Misalkan Anda memiliki klien yang sangat membosankan (seperti saya) yang benar-benar ingin judul menjadi satu baris dan tidak lebih. Jika Anda menggunakan solusi AlmostPitt, maka Anda dalam masalah karena font Anda akan terus bertambah, dan jika Anda memiliki container dengan lebar tetap (seperti bootstrap berhenti di 1140px atau sesuatu di jendela besar). Di sini saya menyarankan Anda untuk menggunakan juga kueri media. Bahkan Anda bisa menemukan jumlah maksimum ukuran px yang dapat Anda tangani dalam penampung Anda sebelum aspeknya menjadi tidak diinginkan (pxMax). Ini akan menjadi hasil maksimal Anda. Kemudian Anda hanya perlu menemukan lebar layar yang tepat yang harus Anda hentikan (wMax). (Saya membiarkan Anda membalik fungsi linier Anda sendiri).

Setelah itu baru lakukan

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

Maka itu linier sempurna dan ukuran font Anda berhenti berkembang! Perhatikan bahwa Anda tidak perlu meletakkan properti css sebelumnya (kalk ...) dalam kueri media di bawah wMax karena kueri media dianggap lebih penting dan itu akan menimpa properti sebelumnya.

Saya tidak berpikir itu berguna untuk membuat cuplikan untuk ini, karena Anda akan kesulitan untuk membuatnya ke seluruh layar dan itu bukan ilmu roket.

Semoga ini bisa membantu orang lain, dan jangan lupa berterima kasih kepada AlmostPitt atas solusinya.

Ini sebenarnya sedang diusulkan di CSS4

Draf kerja di W3C

Mengutip:

Kedua properti ini memungkinkan situs web atau pengguna meminta ukuran font elemen untuk dijepit dalam rentang yang disediakan dengan dua properti ini. Jika nilai yang dihitung font-size berada di luar batas yang dibuat oleh font-min-size dan font-max-size, nilai penggunaan font-size dijepit ke nilai yang ditentukan dalam dua properti ini.

Ini sebenarnya akan berfungsi sebagai berikut:

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

Ini secara harfiah berarti, ukuran font akan menjadi 5% dari lebar viewport, tetapi tidak pernah lebih kecil dari 10 piksel, dan tidak pernah lebih besar dari 18 piksel.

Sayangnya, fitur ini belum diterapkan di mana pun, (bahkan di caniuse.com).

Rucksack brilian, tetapi Anda tidak perlu menggunakan alat seperti Gulp atau Grunt, dll.

Saya membuat demo menggunakan CSS Custom Properties (CSS Variables) untuk mengontrol ukuran font min dan max dengan mudah.

Seperti:

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

Saya mendapatkan hasil yang mulus dengan ini. Ini mengalir dengan lancar antara 3 rentang lebar, seperti fungsi pemenggalan kontinu.

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

Anda dapat menggunakan Sass untuk mengontrol ukuran font min dan max. Inilah solusi brilian dari 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);
}

Harap diperhatikan bahwa menyetel ukuran font dengan px tidak disarankan karena masalah aksesibilitas :

"menentukan ukuran font dalam piksel tidak dapat diakses, karena pengguna tidak dapat mengubah ukuran font di beberapa browser. Misalnya, pengguna dengan penglihatan terbatas mungkin ingin menyetel ukuran font jauh lebih besar daripada ukuran yang dipilih oleh desainer web." (lihat https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Pendekatan yang lebih mudah diakses adalah menyetel font-size: 100%html, yang menghormati setelan ukuran default pengguna , dan LALU menggunakan persentase atau unit relatif saat mengubah ukuran ( ematau rem), misalnya dengan kueri @media.

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

Ya, tampaknya ada beberapa batasan oleh beberapa browser di SVG. Developertool membatasinya menjadi 8000px; Bagan yang dibuat secara dinamis berikut gagal misalnya di Chrome.

Coba 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>