可以相对容器调整字形大小？

Question

图标字体是图像精灵的一种越来越流行的替代品，用于在网页中嵌入图标。

我无法找到等效图像的​​一种功能是调整图标相对于容器元素的大小。

有了图像，我可以做类似的事情：

<div style="width: 200px">
  <img style="width: 100%"/>
</div>

但我没有找到任何等效的字形图标。有没有人找到一种相对于容器调整字形大小的技术？

Answer 1

这不能用CSS font-size完成，因为与字形相关的继承大小是parents font-size, and not it's box width。

可以使用here提到的Javascript来完成。

Matthew Riches在JSFiddle上放了一些代码来证明这一点。我也在这里添加它所以也有它：

<div id="container" style="width: 200px; background: #cccccc;">
    <span id="container">M</span>
</div>

和一些js：

$(document).ready(function() {
    var fontSize = parseInt($("#container").height())+"px";
    $("#container span").css('font-size', fontSize);
});