幅と高さが％のコンテナがあるので、外部要因に応じてスケーリングします。コンテナ内のフォントは、コンテナのサイズに対して一定のサイズにしたいと思います。CSSを使用してこれを行う良い方法はありますか？font-size: x%のみ（100％であろう）元のフォントサイズに応じてフォントをスケーリングすることになります。
回答:
計算を使用してCSS3でこれを行うことができる場合がありますが、JavaScriptを使用する方が安全である可能性があります。
次に例を示します。 http //jsfiddle.net/8TrTU/
JSを使用すると、テキストの高さを変更してから、この同じ計算をサイズ変更イベントにバインドするだけで、サイズ変更中にユーザーが調整している間、または要素のサイズ変更を許可しているときにスケーリングされます。
window.onresize = function(event) { yourFunctionHere(); };同様に、フォントをロードした後にユーザーがページのサイズを変更することを決定した場合、適切にサイズ変更されます
フォントサイズをビューポート幅のパーセンテージとして設定する場合は、次のvw単位を使用します。
#mydiv { font-size: 5vw; }
もう1つの方法は、HTMLに埋め込まれたSVGを使用することです。ほんの数行になります。text要素のfont-size属性は、「ユーザーユニット」として解釈されます。たとえば、ビューポートがで定義されているものです。したがって、ビューポートを0 0 100 100として定義すると、フォントサイズ1はsvg要素のサイズの100分の1になります。
いいえ、CSSで計算を使用してこれを行う方法はありません。問題は、計算内のパーセンテージを含む、フォントサイズに使用されるパーセンテージが、コンテナのサイズではなく、継承されたフォントサイズの観点から解釈されることです。CSSはbwこの目的のために（box-width）と呼ばれる単位を使用できるので、あなたは言うことができますdiv { font-size: 5bw; }が、私はこれが提案されたことを聞いたことがありません。
vwは、コンテナサイズではなく、ビューポートに関連していることに注意してください。おそらく多くの場合に役立ちますが、svgの方がうまくいきました。
別の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を使用できます。概念実証として簡単な例をまとめました。
<div id="container">
<svg width="100%" height="100%" viewBox="0 0 13 15">
<text x="0" y="13">X</text>
</svg>
</div>
関数は次のとおりです。
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);
}
同様の問題がありましたが、@ 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>要素の幅に応じてスケーリングする場合は、次のWebコンポーネントを使用できます：https：
//github.com/pomber/full-width-text
ここでデモを確認してください：https：
//pomber.github.io/full-width-text/
使用法は次のとおりです。
<full-width-text>Lorem Ipsum</full-width-text>
この純粋なCSSメソッドを試すこともできます。
font-size: calc(100% - 0.3em);