如何根据容器大小设置字体大小？ [复制]答案

【问题标题】：how to set font size based on container size? [duplicate]如何根据容器大小设置字体大小？ [复制]
【发布时间】：2012-05-04 17:46:53
【问题描述】：

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

【问题讨论】：

stackoverflow.com/questions/16056591/…

标签： javascript css font-size

【解决方案1】：

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

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

【讨论】：

是的，FitText 非常棒且易于设置

【解决方案2】：

我遇到了类似的问题，但我不得不考虑 @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/

【讨论】：

【解决方案3】：

如果你想根据元素宽度进行缩放，可以使用这个网页组件：
https://github.com/pomber/full-width-text

在此处查看演示：
https://pomber.github.io/full-width-text/

用法是这样的：

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

【讨论】：

【解决方案4】：

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

#mydiv { font-size: 5vw; }

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

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

【讨论】：

vw 支持哪些浏览器？我无法让它在 Firefox 中工作。
@lorefnon，这个页面caniuse.com/#feat=viewport-units 说它可以在 Firefox 19 中运行，同时尝试 Chrome。
@torazburo，嗯，在 FF 17.0 中尝试过。顺便说一句，很棒的发现，不知道有这样的东西存在。
我已经编写了一段较少的代码，这些代码将在可用的情况下使用 vw 并为各种媒体查询回退预定义值：gist.github.com/tnajdek/5143504
请注意，vw 与视口相关，而不是与容器大小相关。在很多情况下可能有用，但 svg 对我来说效果更好。

【解决方案5】：

你也可以试试这个纯 CSS 方法：

font-size: calc(100% - 0.3em);

【讨论】：

那根本行不通。所有这一切都是相对于容器字体大小设置字体大小。（减去 0.3 em）

【解决方案6】：

函数如下：

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/

【讨论】：

【解决方案7】：

另一种 js 替代方案：

Working Example

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's answer 中所述，您可以使用 svg。我整理了一个简单的例子作为概念证明：

SVG Example

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

【讨论】：

只是一个评论，看看 'firefox' 如何打开并显示一个 .pdf 文件。它正在 javascriptly 调整内容的大小。很重，但可以正常工作。
这完全适合我，现在我只需要将文本垂直居中

【解决方案8】：

关于特定容器大小in this answer，我已经给出了使用vw 的更详细答案，所以我不会在这里重复我的答案。

然而，总而言之，它本质上是考虑（或控制）容器大小相对于视口的大小，然后根据容器的大小计算出适当的vw 大小，采取考虑动态调整大小时会发生什么。

因此，如果您希望容器中的 5vw 大小为视口宽度的 100%，那么您可能希望在视口宽度的 75% 处为 (5vw * .75) = 3.75vw。

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

也可以尝试使用：window.onresize = function(event) { yourFunctionHere(); };，这样如果用户决定在页面加载后调整其字体大小，您的字体也会相应地调整大小

【解决方案10】：

它不能用css font-size完成

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

【讨论】：