如何根据容器大小设置字体大小？
我有一个宽度和高度的容器，所以它根据外部因素进行缩放。 我希望容器内的字体是相对于容器大小的常量大小。 有没有什么好方法使用CSS来做到这一点？ font-size: x%只会根据原始字体大小（这将是100％）缩放字体。
你可以使用CSS3做计算，但是使用JavaScript很可能会更安全。
这里是一个例子： http : //jsfiddle.net/8TrTU/
使用JS你可以改变文本的高度，然后简单地将这个相同的计算绑定到一个resize事件，在resize，所以它缩放，而用户正在进行调整，或者你可以调整你的元素的大小。
如果要将字体大小设置为视口宽度的百分比，请使用vw单位：
#mydiv { font-size: 5vw; }
另一种select是使用embedded在HTML中的SVG。 这将只是几行。 文本元素的font-size属性将被解释为“用户单位”，例如视口是按照定义的。 所以如果你把视口定义为0 0 100 100，那么1的字体大小将是svg元素大小的一百分之一。
不，没有办法在CSS中使用计算来做到这一点。 问题是用于字体大小的百分比（包括计算内的百分比）是根据inheritance的字体大小而不是容器的大小来解释的。 CSS可以使用一个叫做bw （box-width）的单位来达到这个目的，所以你可以说div { font-size: 5bw; } div { font-size: 5bw; } ，但是我从来没有听说过这个提议。
另一个JS替代scheme：
工作示例
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。 我把一个简单的例子作为一个概念的certificate：
SVG示例
<div id="container"> <svg width="100%" height="100%" viewBox="0 0 13 15"> <text x="0" y="13">X</text> </svg> </div>
它不能用css font-size来完成
假设您所指的“外部因素”可以通过媒体查询获得，您可以使用它们 – 调整可能必须限制为一组预定义的大小。
我在我的一些项目中使用Fittext ，看起来像这样的问题的一个很好的解决scheme。
FitText使字体大小变得灵活。 在stream体或响应式布局上使用此插件来实现可缩放标题，以填充父元素的宽度。
我希望这对你有用。 ：d
这是function：
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示例没有解决的其他问题。 在我的情况下，
- 我有一个容器，根据使用媒体查询的视口更改大小
- 里面的文本是dynamic生成的
- 我想要放大和缩小
不是最优雅的例子，但它为我做的伎俩。 考虑使用调整窗口大小（ 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>
在这个答案中 ，我已经给出了关于使用vw关于特定容器大小的更详细的答案，所以我不会在这里重复我的答案。
总而言之，从本质上讲，这是一个关于容器尺寸与视口相关的因素（或控制）的问题，然后根据容器的尺寸来devise适当的大小，并考虑需要什么发生，如果有东西dynamicresize。
所以，如果你想在一个容器的视口宽度的100％处做一个5vw大小，那么你可能想要成为视口宽度的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);
