web-dev-qa-db-ja.com

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

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

たとえば、font-sizeが12px未満の要素がある場合、それらは12pxに変更されます。
しかし、font-size graterが12pxの要素がある場合、それらは変更されません。

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

html5css3font-size
57
nrofis

いいえ。font-sizeプロパティを使用してbodyにベースフォントサイズを設定できますが、それ以降は小さいサイズを指定すると、その要素のベースルールがオーバーライドされます。目的の操作を実行するには、Javascriptを使用する必要があります。

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

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

ここにFiddleがあり、そこで実行されていることがわかります。 http://jsfiddle.net/mifi79/LfdL8/2/

3
mifi79

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

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

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

155
Marc Ruef

これはおそらくあなたが望むものではありませんが、CSS 3ではmax-functionを使用できます。

例：

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

そうすれば、font-sizeは1em（1em> 12pxの場合）ですが、少なくとも12pxになります。

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

32
Stefan Steiger

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

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

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

9
zardilior

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

p { font-size: 3vmax; }

好みのタグとサイズを使用します（3を置き換えます）

p { font-size: 3vmin; }

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

7
ccc

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 mixinが必要な場合に備えて：

///
/// 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;
}
4
Syed

私の知る限り、単純なCSSでは不可能です。
しかし、次のようなかなり高価なjQuery操作を実行できます。

jsBinデモ

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

Global Selector*を使用する代わりに、可能であればセレクタをより具体的にすることをお勧めします。

1
Roko C. Buljan

上記のコメントから判断すると、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")
});
0
Patrick Harrington