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

Question

我有一个容器，它的宽度和高度是以百分比为单位的，因此会根据外部因素进行缩放。我希望容器内的字体大小与容器大小成比例地保持不变。是否有一种好的CSS方法可以实现这一点？使用font-size: x%只会根据原始字体大小（即100%）缩放字体。

- FurtiveFelon

---

https://dev59.com/XmQo5IYBdhLWcg3wbe_r - Ming Slogar

Answer 1

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

#mydiv { font-size: 5vw; }

另一种选择是在HTML中嵌入SVG。这只需要几行代码。文本元素的字体大小属性将被解释为“用户单位”，例如以视口为基础定义的单位。因此，如果您将视口定义为0 0 100 100，则字体大小为1的大小将是SVG元素大小的百分之一。

不，没有办法使用CSS进行计算。问题在于，用于字体大小的百分比（包括计算中的百分比）是根据继承的字体大小而不是容器大小来解释的。CSS可以使用一个称为（盒子宽度）的单位来实现此目的，因此您可以说

，但我从未听说过这个提议。

- user663031

---

vw 在哪些浏览器上可以使用？我无法在 Firefox 上使用它。 - lorefnon

@lorefnon，这个页面http://caniuse.com/#feat=viewport-units说它可以在Firefox 19中工作，同时建议尝试Chrome。 - user663031

我已经拼凑出了一段 less 代码，它将在可用的情况下使用 vw，并为各种媒体查询回退预定义值：https://gist.github.com/tnajdek/5143504 - tnajdek

我来这里是因为vw与我需要的相反，结果找到了这个答案......并没有回答我的问题。:( - vsync

请注意，vw是相对于视口而不是容器大小的。在许多情况下可能很有用，但对我来说使用SVG效果更佳。 - zelanix

Answer 2

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

- apaul

---

只是一条评论，请看看“火狐浏览器”如何打开并显示.pdf文件。它通过JavaScript调整大小来实现。相当耗费资源，但完全可用。 - Milche Patern

这对我完全有效，现在我只需要垂直居中文本。 - alejandro

Answer 3

你也许可以使用CSS3的计算方式实现这个功能，不过更安全可靠的方法是使用JavaScript。

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

使用JavaScript可以改变文本的高度，然后将同样的计算绑定到调整大小事件上，在用户调整大小时缩放文本，或在您允许调整元素大小的方式中采取其他方法。

- Matthew Riches

---

尝试使用以下代码：window.onresize = function(event) { yourFunctionHere(); }; 这样，如果用户在页面加载后决定调整大小，您的字体将适当地调整大小。 - Henry Howeson

Answer 4

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

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

- ElvinD

---

Yep，FitText非常棒且设置简单。 - Auxiliary Joel

Answer 5

这不能通过css的font-size属性来实现。

假设你所说的“外部因素”可能会被媒体查询捕捉到，那么你可以使用它们-调整可能需要限制在一组预定义的尺寸范围内。

- Oleg

Answer 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/

- tnt-rox

Answer 7

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

- Richard Merchant

Answer 8

如果您想根据元素宽度进行缩放，可以使用此Web组件：
https://github.com/pomber/full-width-text 在此处查看演示：
https://pomber.github.io/full-width-text/ 使用方法如下：

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

- pomber

Answer 9

我已经在这个答案中详细解释了如何使用vw来控制特定容器的大小，因此我不会在这里重复我的答案。

总之，这实际上是一个关于如何控制容器相对于视口的大小的问题，然后根据容器的大小计算出正确的vw大小，考虑到如果某些东西被动态调整大小需要发生什么。

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

- ScottS

Answer 10

您也可以尝试这种纯CSS方法：

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

- Angie

---

这根本行不通。所有这个做的就是相对于容器的字体大小设置字体大小。（减去0.3 em） - Martijn Scheffer