Css，我可以拉伸文字吗？

Question

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

Answer 1

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

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

Answer 2

我会回答文本的横向拉伸，因为垂直是容易的部分 - 只需使用＆＃34; transform：scaleY（）＆＃34;

＆＃13;

＆＃13;

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

＆＃13;

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

＆＃13;

＆＃13;

＆＃13;

字母间距只是在字母之间添加空格，什么都不展开，但它有点相对

内联块，因为内联元素限制性太强，下面的代码不会起作用

现在是产生差异的组合

font-size 以达到我们想要的大小 - 这样文本的长度应该是它应该的长度，文本前后的文本会出现在旁边它（scaleX仅用于show，浏览器在定位其他元素时仍然会看到元素的原始大小。）

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

transform-origin ，使文字从该行的顶部开始缩放。

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

- 简单的span元素具有font-size，仅作为参考。

这个问题要求一种方法来防止因伸展而引起的文字大胆，我仍然没有给出一个，但 font-weight 属性的价值高于只需正常和粗体。

我知道，您无法看到，但如果您搜索相应的fonts，则可以使用更多的值。

Answer 3

从技术上讲，没有。但你可以做的是使用与你想要的拉伸字体一样高的字体大小，然后用font-stretch水平压缩它。

Answer 4

CSS font-stretch为now supported in all major browsers (except iOS Safari and Opera Mini)。找到支持扩展字体的常见字体系列并不容易，但很容易找到支持缩减的字体，例如：

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

Answer 5

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

Answer 6

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

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

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