如何拉伸文字以占据全高和宽度

Question

我有div元素的高度和宽度。在div元素里面，我有一个字体图标。我想让它伸展到div元素的全部高度和宽度。

Here是显示我所尝试过的链接。

Answer 1

一个可怕的答案位，但它是我能想到这样做的唯一途径。你需要添加一个容器，然后使用尺度变换

.container { 
    -ms-transform: scale(1.87, 1.16); 
    -webkit-transform: scale(1.87, 1.16); 
    transform: scale(1.87, 1.16); 
    margin-left: 91px; 
    margin-top: 2px; 
} 

完整的方法如下

http://jsbin.com/fiqixudamo/1/edit?html,css,js,output

Answer 2

我能想到做到这一点的唯一方法是将文本包围在自己的元素中并使用CSS转换，但它需要非常特殊的尺寸，并且需要针对每个图标和情况进行试验。我不相信任何浏览器都支持字体拉伸。

<div class="fa element"><span>&#xf09d;</span></div> 

.element span { 
    line-height: 0.2; 
    display: inline-block; 
    transform: scale(1.86,1.15); 
    transform-origin: 0 0; 
} 

更新斌：http://jsbin.com/mecodanovo/1/edit?html,css,js,output