小开

严格来说，没有。但是你可以做的是使用一个字体大小的高度，因为你想要的拉伸字体，和那么压缩它与 font-stretch水平。

小开

是的，你实际上可以用 CSS 2D 转换。几乎所有的现代浏览器都支持这一点，包括 IE9 + 。举个例子。

Actual HTML/CSS Stretch Example

超文本标示语言

<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 */
}

提示: 您可能需要为拉长的文本添加页边距，以防止文本冲突。

小开

我将回答文本的水平拉伸，因为垂直部分比较容易——只需使用“ change: 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 ，因为 inline 元素限制太多，否则下面的代码无法工作

现在，组合，使不同的

Font-size 来获得我们想要的大小——这样文本的长度和文本出现在它旁边之前之后的长度(scaleX 只是用来显示的，浏览器在定位其他元素时仍然可以看到元素的原始大小)。

ScaleY 来减小文本的高度，使其与旁边的文本相同。

转换原点 使文本从行顶缩放。

将 edge-bottom 设置为负值，这样下一行就不会远远低于-最好是百分比，这样我们就不会更改 line-height 属性。 竖直对齐 设置为顶部，以防止文本之前或之后浮动到其他高度(因为拉伸文本的实际大小为32px)

——简单的 span 元素有一个字体大小，仅作为参考。

这个问题要求一种方法，以防止大胆的文字所造成的拉伸，我仍然没有给出一个，但 一个 href = “ https://css-trick s.com/almanac/properties/f/font-weight/”rel = “ norefrer”> font-weight 属性有更多的价值超过只是正常和大胆。

我知道，您只是看不到这一点，但是如果您搜索适当的字体，您可以使用更多的值。

小开

现在所有主流浏览器都支持 CSS 字体拉伸(除了 iOS Safari 和 Opera Mini)。要找到一种支持扩展字体的通用字体系列并不容易，但要找到支持缩写的字体却很容易，例如:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

小开

对于像“ MENU”这样的短文，我能想到的唯一方法就是把每一个字母放在一个跨度里，然后把它们放在一个容器里。像这样:

<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;
}

小开

当设计师在我身上拉伸字体的时候，我总是会回到这个页面。接受的解决方案工作得很好，但我经常遇到有利润的问题。

如果您遇到问题，建议在高度而不是宽度上使用转换，在我当前的项目中，这样做对我来说更安全。

.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);
}

我可以使用 CSS 拉伸文本吗？

现在，组合，使不同的