我可以在CSS中拉伸文字吗？我不希望字体变大，因为这会使它看起来比旁边的较小文本大胆。我只想垂直拉伸文本，所以它有点变形。这将在一个div中，然后旁边的普通文本将在另一个div中。我怎样才能做到这一点？

是的，您实际上可以使用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>

字母间距只是在字母之间增加了空间，什么都没有拉伸，但这有点相对

内联代码块，因为内联元素的限制性太强，否则下面的代码将无法正常工作

现在，差异化的组合

font-size达到我们想要的大小-这样，文本将真正达到其应有的长度，而前后的文本将显示在其旁边（scaleX仅用于显示，浏览器仍会看到该元素放置其他元素时保持其原始大小）。

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

transform-origin使文本从行的顶部开始缩放。

margin-bottom设置为负值，以便下一行不会远低于-最好是百分比，这样我们就不会更改line-height属性。 将vertical-align设置为top，以防止前后的文本浮动到其他高度（因为拉伸后的文本的实际大小为32px）

-简单的span元素具有字体大小，仅供参考。

这个问题要求一种方法来防止由拉伸引起的文本的粗体，但我仍然没有给出一个方法，但是font-weight属性具有比normal和bold更大的值。

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

从技术上讲，没有。但是您可以做的是使用一个与要扩展的字体一样高的字体大小，然后使用进行水平压缩font-stretch。

对于“ 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;
}

现在，所有主要浏览器（iOS Safari和Opera Mini除外）都支持CSS字体拉伸。找到支持扩展字体的常见字体系列并不容易，但是很容易找到支持压缩的字体，例如：

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