2015-10-04 173 views
6

我正在處理這件事時,我想要更改的不是font-size,而是兩個可以獨立更改文本寬度和高度的屬性。 所以申請時font-width: 50%這樣:更改字體高度和寬度

enter image description here

文本將被拉伸到一半:

enter image description here

這是可以做到與CSS,也與height屬性?

+1

「如果你的懶惰是一個小提琴「。不知道如何下降。有了這個jQuery可以提供幫助。在哪裏創建一個數字並更改2個CSS屬性。爲了清楚你想獨立控制文本的寬度和高度。你現在怎麼控制寬度 –

+0

http://stackoverflow.com/questions/15649244/responsive-font-size 這可能有幫助 –

+0

在CSS中有一個font-width-stretch屬性,但它目前不支持所有主要瀏覽器 –

回答

19

CSS3 transform具有用於此的scale功能:

p { 
 
    display: inline-block; 
 
    font-size: 32px; 
 
    transform: scale(.5, 1); 
 
}
<p>This is text.</p>

使用在分別爲X軸和Y軸的功能的兩個數字。

4

您可以嘗試按x方向縮放字體。

p{ 
    -webkit-transform: scaleX(0.5); 
    transform: scaleX(0.5); 
} 

- 編輯 -

我看到@Xufox alredy回答了這個問題。

1

我能找到最接近的是字體重量

它接受不但大膽,正常的,但也數值。 100-900,增量爲100。

. Paragraph {font-weight :700;} 

這種結合height屬性應該幫助,但不會給你完整的解決方案

也要看間距屬性,你可以減少單詞的寬度這樣

letter-spacing: 2px;