web-dev-qa-db-ja.com

コンテナサイズに基づいてフォントサイズを設定する方法は？

幅と高さの割合が％のコンテナがあるため、外部要因に応じてスケーリングします。コンテナ内のフォントを、コンテナのサイズに対して一定のサイズにしたいです。 CSSを使用してこれを行う良い方法はありますか？ font-size: x%は、元のフォントサイズ（100％）に従ってのみフォントをスケーリングします。

javascriptcssfont-size
81
FurtiveFelon

計算を使用してCSS3でこれを実行できる場合がありますが、JavaScriptを使用する方が安全です。

以下に例を示します。 http://jsfiddle.net/8TrTU/

JSを使用すると、テキストの高さを変更し、サイズ変更中にこの同じ計算をサイズ変更イベントにバインドするだけで、ユーザーが調整している間、または要素のサイズ変更を許可している間にスケーリングできます。

29
Matthew Riches

フォントサイズをビューポート幅の割合として設定する場合は、vwunitを使用します。

#mydiv { font-size: 5vw; }

もう1つの方法は、HTMLに埋め込まれたSVGを使用することです。それはほんの数行です。テキスト要素のfont-size属性は、たとえばビューポートが定義されている「ユーザーユニット」として解釈されます。したがって、ビューポートを0 0 100 100として定義すると、font-size 1はsvg要素のサイズの100分の1になります。

いいえ、計算を使用してCSSでこれを行う方法はありません。問題は、計算内のパーセンテージを含むfont-sizeに使用されるパーセンテージが、コンテナのサイズではなく、継承されたフォントサイズの観点から解釈されることです。 CSSは、この目的のためにbw（ボックス幅）と呼ばれるユニットを使用できます。したがって、div { font-size: 5bw; }と言うことができますが、この提案は聞いたことがありません。

148
user663031

別のjsの代替：

実施例

fontsize = function () {
    var fontSize = $("#container").width() * 0.10; // 10% of container width
    $("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);

または torazaburoの答え に記載されているように、svgを使用できます。概念実証として簡単な例をまとめます。

SVGの例

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>
66
apaul

一部のプロジェクトで Fittext を使用しましたが、このような問題の良い解決策のようです。

FitTextは、フォントサイズを柔軟にします。流体レイアウトまたはレスポンシブレイアウトでこのプラグインを使用して、親要素の幅を埋めるスケーラブルな見出しを実現します。

7
ElvinD

できませんcss font-size

参照している「外部要因」がメディアクエリで取得できると仮定すると、それらを使用できます-調整は、事前定義されたサイズのセットに制限する必要があります。

6
o.v.

関数は次のとおりです。

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

次に、すべてのドキュメントの子要素のフォントサイズをemまたは％に変換します。

次に、このようなものをコードに追加して、基本フォントサイズを設定します。

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

2
tnt-rox

私は同様の問題を抱えていましたが、@ apaul34208の例が取り組んでいない他の問題を考慮する必要がありました。私の場合;

  • メディアクエリを使用してビューポートに応じてサイズを変更したコンテナがあります
  • 内部のテキストは動的に生成されます
  • スケールダウンだけでなくスケールアップもしたい

最もエレガントな例ではありませんが、私にとってはうまくいきます。ウィンドウのサイズ変更を調整することを検討してください（ https://lodash.com/ ）

var TextFit = function(){
        var container = $('.container');
  container.each(function(){
    var container_width = $(this).width(),
        width_offset = parseInt($(this).data('width-offset')),
        font_container = $(this).find('.font-container');
        
     if ( width_offset > 0 ) {
         container_width -= width_offset;
     }
                
    font_container.each(function(){
      var font_container_width = $(this).width(),
          font_size = parseFloat( $(this).css('font-size') );

      var diff = Math.max(container_width, font_container_width) - Math.min(container_width, font_container_width);
 
      var diff_percentage = Math.round( ( diff / Math.max(container_width, font_container_width) ) * 100 );
      
      if (diff_percentage !== 0){
          if ( container_width > font_container_width ) {
            new_font_size = font_size + Math.round( ( font_size / 100 ) * diff_percentage );
          } else if ( container_width < font_container_width ) {
            new_font_size = font_size - Math.round( ( font_size / 100 ) * diff_percentage );
          }
      }
      $(this).css('font-size', new_font_size + 'px');
    });
  });
}

$(function(){
  TextFit();
  $(window).resize(function(){
        TextFit();
  });
});
.container {
                width:341px;
                height:341px;
                background-color:#000;
                padding:20px;
        }
        .font-container {
                font-size:131px;
                text-align:center;
                color:#fff;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container" data-width-offset="10">
        <span class="font-container">£5000</span>
</div>

https://jsfiddle.net/Merch80/b8hoctfb/7/

1
Richard Merchant

要素の幅に応じてスケーリングする場合は、次のWebコンポーネントを使用できます。
https://github.com/pomber/full-width-text

ここでデモを確認してください：
https://pomber.github.io/full-width-text/

使用方法は次のとおりです。

<full-width-text>Lorem Ipsum</full-width-text>
0
pomber

特定のコンテナのサイズ設定に関してvwを使用することについて、より詳細な回答を示しました この回答 ここで答えを繰り返すだけではありません。

ただし、要約すると、本質的には、ビューポートに関してコンテナサイズがどのようになるかをファクタリング（または制御）し、コンテナのサイズに基づいて適切なvwサイズを決定することです。何かが動的にサイズ変更された場合に何が起こる必要があるのか​​。

したがって、ビューポート幅の100％のコンテナで5vwサイズが必要な場合、ビューポート幅の75%で(5vw * .75) = 3.75vwにしたいでしょう。

0
ScottS