如何拉伸文字以佔據全高和寬度

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