html - 可以相对于容器调整字形大小吗？

Question

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

图像的一个功能我找不到对应的是相对于容器元素调整图标的大小。

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

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

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

Answer 1

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

这可以用 Javascript 完成，如前所述 here .

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);
});