如何根据容器大小设置字体大小？

我有一个宽度和高度为％的容器，因此可以根据外部因素进行缩放。我希望容器内的字体相对于容器的大小是恒定的。是否有使用CSS做到这一点的好方法？将font-size: x%根据原来的字体尺寸（这将是100％）将只缩放字体。

您也许可以使用CSS3通过计算来做到这一点，但是使用JavaScript可能更安全。

这是一个示例：http : //jsfiddle.net/8TrTU/

使用JS，您可以更改文本的高度，然后在调整大小的过程中将相同的计算简单地绑定到调整大小的事件，以便在用户进行调整时进行缩放，或者允许您调整元素的大小。

如果要将字体大小设置为视口宽度的百分比，请使用vw单位：

#mydiv { font-size: 5vw; }

另一种选择是使用嵌入在HTML中的SVG。只是几行。文本元素的font-size属性将被解释为“用户单位”，例如，视口是根据其定义的。因此，如果将视口定义为0 0 100 100，则font-size为1将会是svg元素大小的一百分之一。

不，没有办法在CSS中使用计算来做到这一点。问题是用于字体大小的百分比（包括计算中的百分比）是根据继承的字体大小而不是容器的大小来解释的。CSS可以bw为此目的使用一个称为（box-width）的单位，因此可以这样说div { font-size: 5bw; }，但是我从未听说过这个提议。

另一个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>

我在一些项目中使用了Fittext，它看起来像是解决此类问题的好方法。

FitText使字体大小灵活。在您的流畅或响应式布局上使用此插件可实现可缩放的标题，该标题填充父元素的宽度。

它不能用css font-size完成

假设您所指的“外部因素”可以由媒体查询获取，则可以使用它们-调整可能必须限于一组预定义的大小。

这是函数：

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/

我有一个类似的问题，但我不得不考虑@ 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/

我在此答案中vw针对特定的容器大小给出了更详细的使用答案，因此在这里我不会重复我的答案。

总而言之，本质上是要考虑（或控制）容器相对于视口的大小，然后vw根据容器的大小制定适当的大小，并考虑到需要发生的事情如果某些内容是动态调整大小的。

因此，如果您希望某个5vw容器的尺寸为视口宽度的100％，那么75%您可能希望为视口宽度的一个(5vw * .75) = 3.75vw。

如果要根据元素宽度缩放它，可以使用以下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);