2

该图标是来自http://fontello.com/的字体的一部分

所以它基本上是文本。我在这里阅读了很多关于调整文本大小以适应容器元素的问题，但似乎没有任何解决方案。

但问题是图标略有不同——它总是一个字符。我想知道这是否可以以某种方式将其调整为容器元素的 100% 大小。因为我只需要找出一个字符的大小，而不是一个可变长度的字符串。

关于我该怎么做的任何想法？

4

1 回答 1

1

我能想到的最接近纯 CSS 的是：

.container {
    width:1em;
    height:1em;
    border:1px solid red;
    font-size: 100px;
}

.container span {
    font-size:1em;
    line-height:1em;
}

http://jsfiddle.net/t73yT/

您将字体大小设置为容器的大小，并使用 em 指定容器的宽度/高度。您的图标字体可能没有填充以及普通字体没有的功能，这可能只是使其按预期工作（您可以但我猜）。

您还有一个 javascript 选项：

$(document).ready(function(){
    var w = $('div').outerWidth();
    $('div').css('fontSize', w+'px');
});

http://jsfiddle.net/YbUef/1/

但这几乎做同样的事情，并且您受到字体文件中任何间距/填充的限制。

于 2013-11-06T15:08:31.327 回答