html - 幅も増やさずにテキストの高さを増やす

Question

幅を比例的に増やすことなく、HTML のテキストの高さを増やしたいと考えています。を増やすとfont-size、水平方向と垂直方向の両方で増加します。

---

幅を一定にして、テキストの高さを伸ばすようなものと考えることができます。CSSを使用してそれを行うことはできますか？

Answer 1

これはおそらくあなたのためにそれを行うでしょう。

.higher {
    transform:scale(1,2);
    -webkit-transform:scale(1,2);
    -moz-transform:scale(1,2);
    -ms-transform:scale(1,2);
    -o-transform:scale(1,2);
}

Answer 2

CSS3 の scale transform プロパティを使用できます。

.condensed {
    -webkit-transform: scale(1, 2);
       -moz-transform: scale(1, 2);
        -ms-transform: scale(1, 2);
         -o-transform: scale(1, 2);
            transform: scale(1, 2);
}​

2 つの値を取るため、文字の高さと幅をスケーリングできます。

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/

ご覧のとおり、値を切り替えると、文字が逆に引き伸ばされます。

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/1/

これは CSS3 プロパティであり、すべてのブラウザー (ほとんどの場合 IE<9) でサポートされているわけではないことに注意してください。

また、テキストがスケーリングされていないため、要素の幅が効果的に維持されることも考慮してください。レイアウトの癖がある場合は、これが原因である可能性があります。

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/2/

ここでは、効果を示すためにスケーリングされた背景の色を設定し<h1>ます。