web-dev-qa-db-ja.com

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

インターネットでかなり長い間検索しましたが、役に立ちませんでした。

htmlcssfontsfont-size
85
Toby van Kempen

いいえ、最小または最大のフォントサイズのCSSプロパティはありません。多くの場合、ブラウザには最小フォントサイズの設定がありますが、作成者ではなくユーザーの制御下にあります。

@media querys を使用して、画面やウィンドウの幅などに応じてCSS設定を行うことができます。このような設定では、たとえばウィンドウが非常に狭い場合は、フォントサイズを特定の小さな値に設定します。

56
Jukka K. Korpela

数式を使用して、ビューポートの幅を含めることにより、これを行うことができます。

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

これにより、最小フォントサイズが7pxに設定され、ビューポートの幅に応じて.5vwで増幅されます。

がんばろう！

88
AlmostPitt

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

私はそれが役立つことを願っています！

61
Willy VAN INGEN

私はここに少し遅れて来ていますが、それについてはあまり信用されていません。プロジェクトのためにそれを行うことを余儀なくされたので、私は以下の答えを混ぜています.

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

何であれ、解決策は何ですか？

次の2つのツールを使用して、これを行うことができます。 メディアクエリ ans vwプロパティ

1）cssで使用するすべてのステップでメディアクエリを作成し、フォントを固定量から別の固定量に変更する「バカ」ソリューションがあります。それは機能しますが、それは非常に退屈であり、滑らかな線形の側面がありません。

2）AlmostPittが説明したように、最小値には素晴らしい解決策があります：

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

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

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

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

その後、ただやる

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

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

画面全体に表示するのに苦労し、結局ロケット科学ではないので、これのスニペットを作成することは有用ではないと思います。

これが他の人の助けになることを願っており、AlmostPittに彼のソリューションに感謝することを忘れないでください。

8
Alburkerk

リュックサックは素晴らしいですが、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
Dannie Vinther

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

これらでいくつかのスムーズな結果が得られました。連続的な区分関数のように、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;
    }
}
2
Chris Topillogical

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

W3Cで作業中のドラフト

見積もり：

これらの2つのプロパティを使用すると、ウェブサイトまたはユーザーは、これら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でも）。

1
Roberrrt

はい、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>
0
Padina