CSSを使用してテキストをストレッチできますか？
回答:
はい、実際にはCSS 2D変換を使用できます。これは、IE9 +を含むほとんどすべての最新のブラウザーでサポートされています。ここに例があります。
HTML
<p>I feel like <span class="stretch">stretching</span>.</p>CSS
span.stretch {
display:inline-block;
-webkit-transform:scale(2,1); /* Safari and Chrome */
-moz-transform:scale(2,1); /* Firefox */
-ms-transform:scale(2,1); /* IE 9 */
-o-transform:scale(2,1); /* Opera */
transform:scale(2,1); /* W3C */
}ヒント：テキストの衝突を防ぐために、伸ばしたテキストにマージンを追加する必要がある場合があります。
垂直は簡単な部分なので、テキストの水平方向のストレッチについて答えます-「transform：scaleY（）」を使用するだけです
.stretched-text {
letter-spacing: 2px;
display: inline-block;
font-size: 32px;
transform: scaleY(0.5);
transform-origin: 0 0;
margin-bottom: -50%;
}
span {
font-size: 16px;
vertical-align: top;
}<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>文字間隔は文字の間にスペースを追加し、何も引き伸ばしませんが、それはちょっと相対的です
inline-blockは、インライン要素が非常に制限的であり、以下のコードはそれ以外では機能しないためです。
今違いを生む組み合わせ
font-sizeで希望のサイズを取得します。これにより、テキストは実際に想定される長さとなり、その前後に表示されるテキストになります（scaleXは表示用であり、ブラウザは引き続き要素を認識します）他の要素を配置する場合は元のサイズで）。
scaleYを使用してテキストの高さを減らし、横のテキストと同じになるようにします。
transform-originを使用して、行の先頭からテキストを拡大縮小します。
margin-bottomを負の値に設定します。これにより、次の行が大幅に下回らないようにします。できればパーセントで、line-heightプロパティを変更しないようにします。 vertical-alignをtopに設定して、前後のテキストが他の高さに浮動するのを防ぎます（引き伸ばされたテキストの実際のサイズは32pxであるため）
-単純なspan要素には、参考としてのみfont-sizeがあります。
質問は、ストレッチによって引き起こされるテキストの太さを防ぐ方法を尋ねましたが、まだ与えていませんが、font-weightプロパティには、通常の太字よりも多くの値があります。
わかりませんが、適切なフォントを検索すると、より多くの値を使用できます。
「メニュー」のような短いテキストについて私が考えることができる唯一の方法は、すべての文字をスパンに入れて、後でそれらをコンテナに揃えることです。このような：
<div class="menu-burger">
<span></span>
<span></span>
<span></span>
<div>
<span>M</span>
<span>E</span>
<span>N</span>
<span>U</span>
</div>
</div>そして、CSS：
.menu-burger {
width: 50px;
height: 50px;
padding: 5px;
}
...
.menu-burger > div {
display: flex;
justify-content: space-between;
}CSS font-stretchがすべての主要ブラウザー（iOS SafariとOpera Miniを除く）でサポートされるようになりました。フォントの拡張をサポートする一般的なフォントファミリを見つけるのは簡単ではありませんが、たとえば、圧縮をサポートするフォントを見つけるのは簡単です。
font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;デザイナーが私にフォントを引き伸ばすとき、常にこのページに戻ってきます。受け入れられた解決策はうまく機能しますが、マージンの問題に頻繁に遭遇します。
問題が発生している場合は、幅ではなく高さで変換を使用することをお勧めします。現在のプロジェクトでは、私にとってはより安全でした。
.font-stretch {
display: inline-block;
-webkit-transform: scale(1,.9);
-moz-transform: scale(1,.9);
-ms-transform: scale(1,.9);
-o-transform: scale(1,.9);
transform: scale(1,.9);
}