Question

是否有某种技巧可以使字体大小占用相同的宽度，无论使用哪种浏览器？（我使用像素作为字体大小，但我不确定这个问题的相关性。）

通常情况下，如果我的网站上有一行文字，我只想占用一行而不是下降到一秒，我必须确保我写的文字足够短，以适合作为一行在所有主要浏览器的分配空间内。例如，我可能会在div（也有指定宽度，以像素为单位）内写一些文本，这些文本在firefox，safari等上作为一行出现，但是当我去检查ie8时，由于某种原因，这种方式显示它，它没有空间用于最后一个单词并将该单词放到第二行的开头。我想知道是否有某种方法可以使文本在宽度方面占用相同数量的空间，无论如何。这里有一些我想念的简单解决方案吗？

正如我所说，我使用像素作为字体大小，我一直在研究使用其他测量单位，但据我所知，到目前为止，使用其他东西如em的字体大小并不是真正的回答这个，因为它们基本上是像素的抽象。即使有一种方法可以使用不同的测量单位，我也有兴趣知道是否有一个解决方案可以让我保留像素，因为这只是我的首选测量单位。

Answer 1

不同的浏览器和操作系统的字体处理略有不同，因此很难准确预测这些事情。我所做的是编写一个小的jQuery函数，增加容器中字体的大小，直到它包装之前，装入容器而不是包装结果。它通常在IE中加载闪烁但在普通浏览器上并不明显。您可以在附加的链接中查看它（检查市场名称）：

http://www.hdradioalliance.com/station_guides/widget.php?id=77

http://www.hdradioalliance.com/station_guides/widget.php?id=21

http://www.hdradioalliance.com/station_guides/widget.php?id=61

如果符合您的需要，请随意回收代码。

编辑：实际上，这个特定的代码缩小了字体直到它的容器高一行 - 而不是我所说的，这是另一种方式。我已经做到了两种方式。这是：

$(document).ready(function(){
    var headingSize = 1;
    while($('#headingSling h1 span').height() > 34 && parseInt($('#headingSling h1 span').css('font-size').replace(/\D\./g,'')) > 10){
        headingSize -= 0.01;
        $('#headingSling h1 span').css('font-size', headingSize+'em');
    }
});

如何在任何浏览器中均匀地使文本宽度适合？

1 个答案: