min-font-sizeやmax-font-sizeのようなものはありますか？

ブラウザウィンドウに応答するdivのフォントを作成しようとしています。これまでのところ、完全に機能しましたが、親divにはのがmax-widthあり525pxます。ブラウザのサイズをさらに変更しても、フォントのサイズ変更は停止しません。これは、min-font-sizeまたはのようなものがあるのかmax-font-size、そのようなものが存在しないのか、同様のことを達成する方法があるのか疑問に思いました。

でパーセンテージを使用するfont-sizeとうまくいくと思いましたが、テキストのビットは親divに応じてスケーリングされません。ここに私が持っているものがあります：

親divのCSS：

.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ドキュメントに追加することを忘れないように、ただのリマインダー：

<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プロパティのようなものはありません。理由はわかりませんが、このプロパティの誤用を恐れているためだと思いますが、深刻な問題になる可能性のあるユースケースは見つかりません。

とにかく、解決策は何ですか？

それを可能にする2つのツール：メディアクエリと ans VWプロパティを

1）cssで入力するすべてのステップに対してメディアクエリを作成し、フォントを固定量から別の固定量に変更することからなる「ばかげた」ソリューションがあります。それは機能しますが、実行するのは非常に退屈であり、滑らかな線形のアスペクトはありません。

2）AlmostPittが説明したように、最小値には強力な解決策があります：

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

ここでの最小値は、ビュー幅の0.5％に加えて7pxです。 それはすでに本当にクールでほとんどの場合に機能しています。メディアクエリは必要ありません。適切なパラメータを見つけるために少し時間を費やす必要があります。

線形関数であることに気づいたように、基本的な数学では、2つの点が既にパラメーターを見つけていることがわかります。次に、非常に大きな画面とモバイルバージョンで必要なpxのフォントサイズを修正し、科学的な方法を実行するかどうかを計算します。とはいえ、絶対に必要というわけではなく、試すだけで行くことができます。

3）非常に退屈なクライアント（私のような）がいて、タイトルを1行にして、それ以上は絶対に望んでいないとします。AlmostPittソリューションを使用した場合、フォントが成長し続けるため、および固定幅のコンテナー（1140pxで停止するブートストラップまたは大きなウィンドウで何か）がある場合、問題が発生します。ここでは、メディアクエリも使用することをお勧めします。実際、アスペクトが不要になる前にコンテナで処理できるpxサイズの最大値（pxMax）を見つけることができます。これが最大になります。次に、停止する必要がある正確な画面幅（wMax）を見つける必要があります。（私はあなた自身で線形関数を逆転させます）。

その後はただ

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

次に、それは完全に線形であり、あなたのフォントサイズは成長を止めます！メディアクエリは重要度が高いと見なされ、以前のプロパティを上書きするため、wMaxの下のメディアクエリに以前のcssプロパティ（calc ...）を配置する必要がないことに注意してください。

これをスニペットにしても、画面全体に表示するのは難しく、ロケット科学ではないので、私はこのスニペットを作成することは役に立たないと思います。

これが他の人に役立つことを願っています。AlmostPittの解決に感謝することを忘れないでください。

これは実際にはCSS4で提案されています

W3Cでの草案

見積もり：

これら2つのプロパティを使用すると、Webサイトまたはユーザーは、要素のフォントサイズをこれら2つのプロパティで提供される範囲内に固定する必要があります。計算された値font-sizeがfont-min-sizeおよびfont-max-sizeによって作成された境界の外にある場合、font-sizeの使用値は、これら2つのプロパティで指定された値に固定されます。

これは実際には次のように機能します。

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

これは文字通り、フォントサイズがビューポートの幅の5％になることを意味しますが、10ピクセル以上、18ピクセル以下になることはありません。

残念ながら、この機能はまだどこにも実装されていません（caniuse.comにも実装されていません）。

リュックサックは素晴らしいですが、必ずしも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を使用して、最小および最大のフォントサイズを制御できます。これが、エドゥアルドブーカスによる素晴らしいソリューションです。

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でfont-sizingを設定することはお勧めしません。

「一部のブラウザではユーザーがフォントサイズを変更できないため、pxでフォントサイズを定義することはできません。たとえば、視覚障害のあるユーザーは、ウェブデザイナーが選択したサイズよりもはるかに大きいフォントサイズを設定したい場合があります。」（https://developer.mozilla.org/en-US/docs/Web/CSS/font-sizeを参照してください）

よりアクセスしやすい方法はfont-size: 100%、ユーザーのデフォルトのサイズ設定を尊重するhtmlで設定することです。そして、たとえば@mediaクエリを使用して、サイズ変更（emまたはrem）時にパーセンテージまたは相対単位を使用します。

（https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/を参照）

はい、SVGのブラウザによっては制限があるようです。developertoolは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>