CSS：将字体设置为一个大小，以便文本占据整个容器

Question

  

可能重复：
  resize font to fit in a div (on one line)

对于小型闪卡制造商应用，我需要设置正确的字体大小，以便文本填充固定大小容器的所有可用宽度;喜欢这张图片中四个方框中的文字：

已向this question提供了使用PHP GD的解决方案。是否有针对此问题的css或javascript客户端解决方案？

Answer 1

这不是蛮力;）

HTML：

<span id="txt">Lorem</span>
<div id="card"></div>

CSS：

#card { 
    width: 150px; 
    height: 50px;
    border: 1px solid black 
}

#txt {
    display: none
}

JS（使用JQuery）：

var size_w = (150/$('#txt').width() - 0.05);
var size_h = (50/$('#txt').height() - 0.05);
var size = size_w>size_h?size_h:size_w;
$('#card').css('font-size',  size + 'em');
$('#card').text($('#txt').text());

在这里摆弄：http://jsfiddle.net/cwfDr/

好吧，现在它涵盖了高度和宽度。 ;）

Answer 2

我写了这个小小的插件，以适应浏览器窗口。

            (function($){
                $.fn.extend({ 
                    sizeFont: function() {
                        return this.each(function() {
                            $obj = $(this);
                            $obj.css({fontSize:($(window).width()/$obj.width())+'em'});
                        });
                    }
                });
            })(jQuery);

我确信您可以通过将$(window)切换为您想要的任何内容来修改此选项以满足您的需求。这是现场直播：

http://cullywright.com/

Answer 3

我多年前就已经研究过了，我们决定这样做的唯一合乎逻辑的方法是不使用图像而不是文本来计算数字，然后根据宽度计算所需图像的大小容器（我们也有文字）。此外，我们使用为数字/文本选择的固定宽度字体。

另一种替代方法是Flash文本替换，它可以让您更好地控制：http://www.mikeindustries.com/blog/archive/2004/08/sifr

在过去的几年中可能还有其他技术发展，也许CSS3可能有所帮助（虽然它可能没有广泛支持），但图像技术给了我们最好的帮助。