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

如何解决我可以使用CSS拉伸文字吗？

| 我可以在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-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;
}

, 当设计师在我身上拉伸字体时，总是回到此页面。公认的解决方案效果很好，但是我经常遇到利润问题。如果遇到问题，建议在高度而不是宽度上使用变换，这对我当前的项目来说是更安全的生活。

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

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

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