85

幅と高さが % のコンテナーがあるため、外部要因に応じてスケーリングされます。コンテナー内のフォントを、コンテナーのサイズに対して一定のサイズにしたいと考えています。CSSを使用してこれを行う良い方法はありますか? はfont-size: x%、元のフォント サイズ (100%) に従ってフォントを拡大縮小するだけです。

4

10 に答える 10

151

font-size をビューポート幅のパーセンテージとして設定する場合は、次のvw単位を使用します。

#mydiv { font-size: 5vw; }

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

いいえ、計算を使用して CSS でこれを行う方法はありません。問題は、計算内のパーセンテージを含む font-size に使用されるパーセンテージが、コンテナーのサイズではなく、継承されたフォント サイズに関して解釈されることです。CSS はbwこの目的のために (box-width) と呼ばれる単位を使用できるので、 と言うことができますがdiv { font-size: 5bw; }、これが提案されているのは聞いたことがありません。

于 2012-12-09T17:36:08.273 に答える
68

別の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);

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

SVG の例

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>
于 2013-11-11T17:07:39.923 に答える
30

計算を使用して CSS3 でこれを行うことができる場合がありますが、JavaScript を使用する方が安全である可能性が高くなります。

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

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

于 2012-04-24T07:33:41.650 に答える
7

いくつかのプロジェクトでFittextを使用しましたが、このような問題に対する適切な解決策のようです。

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

于 2013-11-12T12:52:03.193 に答える
6

css font-sizeでは実現できません

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

于 2012-04-24T06:12:03.757 に答える
0

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

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

使い方はこんな感じです。 

<full-width-text>Lorem Ipsum</full-width-text>
于 2016-10-29T22:22:40.600 に答える