CSSでmin-font-sizeを設定する方法

Question 1

HTMLページのすべての要素に最小フォントサイズを設定したいと思います。

たとえば、フォントサイズが12px未満の要素がある場合、それらは12pxに変更されます。
ただし、フォントサイズが12pxの要素がある場合、それらは変更されません。

CSSでそれを行う方法はありますか？

Question 2

いいえ。プロパティをbody使用して基本フォントサイズを設定できますがfont-size、それ以降に小さいサイズを指定すると、その要素の基本ルールが上書きされます。あなたが探していることをするために、あなたはJavascriptを使う必要があるでしょう。

ページ上の要素を繰り返し処理し、次のようなものを使用して小さいフォントを変更できます。

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

これが完了したことを確認できるフィドルです：http：//jsfiddle.net/mifi79/LfdL8/2/

Question 3

CSS3には、そのためのシンプルですが素晴らしいハックがあります。

font-size:calc(12px + 1.5vw);

これは、calc（）の静的部分が最小値を定義するためです。動的部分が0に近い値に縮小する場合でも。

Question 4

2019年12月中旬の時点で、CSS4 min / max-functionはまさにあなたが望むものです:(
注意し て踏んでください、これは非常に新しく、古いブラウザ（別名IEとmsEdge）はまだそれをサポートしていません）
（現在サポートされていますChromium79およびFirefoxv75）

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max

例：

blockquote {
    font-size: max(1em, 12px);
}

そうすれば、フォントサイズは1em（1em> 12pxの場合）になりますが、少なくとも12pxになります。

~~残念ながら、この素晴らしいCSS3機能はまだどのブラウザでもサポートされていませんが、これがすぐに変更されることを願っています！~~

編集：

これは以前はCSS3の一部でしたが、その後CSS4用に再スケジュールされました。2019年12月11日の
時点で、サポートはChrome / Chromium 79（AndroidおよびAndroid WebViewを含む）に到着しました。また、Opera66およびSafari11.1（iOSを含む）を含むMicrosoft Chredge、別名Anaheimにもサポートが到着しました。

Question 5

私は少し遅れているようですが、この問題を抱えている他の人はこのコードを試してください

p { font-size: 3vmax; }

好みのタグとサイズを使用してください（3を置き換えてください）

p { font-size: 3vmin; }

最大サイズに使用されます。

Question 6

メディアクエリを使用します。例：これは元のサイズが1.0vwを使用しているものですが、1000に達すると文字が小さすぎるので、拡大します

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

私が取り組んでいるこのサイトは、500pxを超えると応答しませんが、さらに必要になる場合があります。このソリューションの利点は、スーパーミニ文字を使用せずにフォントサイズのスケーリングを維持し、それをjsフリーに保つことができることです。

Question 7

CSSには、上限と下限の間の値を保持するclamp（）関数があります。クランプ（）関数を使用すると、定義された最小値と最大値の間の値の範囲で中間値を選択できます。

それは単に3つの次元を取ります：

最小値。
リストアイテム
推奨値最大許容値。

以下のコードを試して、ウィンドウのサイズ変更を確認してください。これにより、コンソールに表示されるフォントサイズが変更されます。最大値150pxと最小値を設定します100px。

$(window).resize(function(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

スニペットを展開

Question 8

CSSソリューション：

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

scssミックスインが必要な場合に備えて：

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///

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

Question 9

プレーンCSSでは不可能
ですが、次のようなかなり高価なjQuery操作を実行できます。

jsBinデモ

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

_{グローバルセレクター *を使用する代わりに、（可能であれば）セレクターをより具体的にすることをお勧めします。}

Question 10

CSSプロパティはして削除CSSフォントモジュールレベル4仕様（とブラウザ私の知る限りでは実装されません）から。また、CSSワーキンググループは、まだ最大のブラウザーサポートがないCSSの例を置き換えたため、ブラウザーがサポートするのを待つ必要があります。https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examplesの例を参照してください。font-min-sizefont-max-sizefont-size: clamp(...)

Question 11

上記のコメントから判断すると、jQueryでこれを実行しても問題ありません—ここに行きます：

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

これを行うためのよりクリーンな方法は、CSSにfont-size：12pxを設定する「min-font」クラスを設定し、代わりにクラスを追加することです。

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});

Question 12

それは50pxで完全に動作します。これは静的として機能し、したがって最小幅として機能します。

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