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

Question

可能是重复问题：
如何调整字体大小以适应固定宽度容器内的文本（单行）

对于一个小型的 制卡应用程序，我需要设置正确的字体大小，使文本填充固定大小的容器中所有可用的宽度；就像这张图片中四个方框里的文本一样：

在这个问题中提供了使用 PHP GD 的解决方案。是否有使用 CSS 或 JavaScript 的客户端解决方案来解决这个问题？

- Majid Fouladpour

---

顺便说一下，3 * 262 是786，但我们就忽略它吧！ - Majid Fouladpour

@Pekka - 遗憾的是，那是真的。我会投票关闭 - 很抱歉。 - Majid Fouladpour

完全没有问题，为此保留一个副本也不会有任何损失。 - Pekka

Answer 1

it's not brute force ;)

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/

好的，现在它同时涵盖了高度和宽度。;)

- marines

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/

- Oscar Godson

---

+1 - 很酷的小插件。谢谢。 - Majid Fouladpour

Answer 3

我曾经在几年前研究过这个问题，我们决定使用图像而不是文本来表示数字，这是唯一不会导致疯狂的逻辑方式，然后根据容器的宽度计算所需图像的大小（我们也有文本）。此外，我们使用了一个为数字/文本选择的固定宽度字体。

另一种选择是Flash文本替换，它可以给你更多的控制权：http://www.mikeindustries.com/blog/archive/2004/08/sifr 可能在过去几年中已经出现了其他技术，也许CSS3可以帮助解决问题（尽管如果它确实能够解决问题，可能不会被广泛支持），但是图像技术为我们提供了最好的性价比。

- Jared Farrish

---

+1 - sIFR确实是一个真正的救星。非常感谢。 - Majid Fouladpour

没问题。就像我说的，每种方法都有自己的缺点，但我们决定采用图像替换方法，因为它是最少问题、最直接的答案，缺点最少。话虽如此，sIFR绝对是一个不错的选择，特别是因为你可以从服务器控制字体本身。 - Jared Farrish