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

Can I stretch text using CSS?

提问by Matthew905

Can I stretch text in CSS? I don't want the font to be bigger, because that makes it appear bolder than smaller text beside it. I just want to stretch the text vertically so it's kind of deformed. This would be in one div, and then the normal text beside it would be in another div. How can I do this?

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

回答by Timothy Perez

Yes, you can actually with CSS 2D Transforms. This is supported in almost all modern browsers, including IE9+. Here's an example.

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

HTML

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

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

TIP:You may need to add margin to your stretched text to prevent text collisions.

提示：您可能需要为拉伸文本添加边距以防止文本冲突。

回答by Dimitris K

I'll answer for horizontal stretching of text, since the vertical is the easy part - just use "transform: scaleY()"

我将回答文本的水平拉伸，因为垂直是简单的部分 - 只需使用“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>

letter-spacingjust adds space between letters, stretches nothing, but it's kinda relative

letter-spacing只是增加了字母之间的空间，什么都不拉伸，但它有点相对

inline-blockbecause inline elements are too restrictive and the code below wouldn't work otherwise

inline-block因为内联元素限制太多，否则下面的代码将无法工作

Now the combination that makes the difference

现在这个组合与众不同

font-sizeto get to the size we want - that way the text will really be of the length it's supposed to be and the text before and after it will appear next to it (scaleX is just for show, the browser still sees the element at its original size when positioning other elements).

font-size以获得我们想要的大小 - 这样文本将真正具有它应该的长度，并且它之前和之后的文本将出现在它旁边（scaleX 仅用于显示，浏览器仍然可以看到该元素在定位其他元素时以其原始大小）。

scaleYto reduce the height of the text, so that it's the same as the text beside it.

scaleY降低文本的高度，使其与旁边的文本相同。

transform-originto make the text scale from the top of the line.

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

margin-bottomset to a negative value, so that the next line will not be far below - preferably percentage, so that we won't change the line-height property. vertical-alignset to top, to prevent the text before or after from floating to other heights (since the stretched text has a real size of 32px)

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

-- The simple span element has a font-size, only as a reference.

-- 简单的span元素有一个font-size，仅供参考。

The question asked for a way to prevent the boldness of the text caused by the stretch and I still haven't given one, BUT the font-weightproperty has more values than just normaland bold.

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

I know, you just can't see that, but if you search for the appropriate fonts, you can use the more values.

我知道，你只是看不到那个，但是如果你搜索合适的fonts，你可以使用更多的值。

回答by Peter Kazazes

Technically, no. But what you can do is use a font size that is as tall as you would like the stretched font to be, and thencondense it horizontally with font-stretch.

从技术上讲，没有。但是您可以做的是使用与拉伸字体一样高的字体大小，然后使用font-stretch.

回答by SemanticZen

CSS font-stretch is now supported in all major browsers (except iOS Safari and Opera Mini). It is not easy to find a common font-family that supports expanding fonts, but it is easy to find fonts that support condensing, for example:

现在所有主流浏览器都支持 CSS 字体拉伸（iOS Safari 和 Opera Mini 除外）。找到一个支持扩展字体的通用字体家族并不容易，但是很容易找到支持压缩的字体，例如：

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

回答by Deividas ?imas

The only way I can think of for short texts like "MENU" is to put every single letter in a span and justify them in a container afterwards. Like this:

对于像“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>

And then the CSS:

然后是 CSS：

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

回答by Ray Perry

Always coming back to this page when a designer stretches a font on me. The accepted solution works great, but I frequently run into issues with margins.

当设计师在我身上拉伸字体时，总是会回到这个页面。公认的解决方案效果很好，但我经常遇到利润问题。

Would recommend using the transform on the height instead of the width if you're running into issues, was a life safer for me in my current project.

如果您遇到问题，建议在高度而不是宽度上使用变换，在我当前的项目中对我来说是一种更安全的生活。

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