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

Question

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

对于像“菜单”这样的短文本，我能想到的唯一方法是将每个字母放在一个跨度中，然后在一个容器中证明它们的合理性。像这样：

<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 4

我会回答文本的水平拉伸，因为垂直是简单的部分 - 只需使用“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-spacing 只是在字母之间添加空格，没有拉伸，但它有点相对

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

现在是与众不同的组合

font-size 以达到我们想要的大小 - 这样文本将真正达到它应该的长度并且它之前和之后的文本将出现在它旁边（scaleX 是只是为了展示，浏览器在定位其他元素时仍然会看到元素的原始大小）。

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

transform-origin 使文本从行首开始缩放。

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

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

该问题要求提供一种方法来防止由拉伸引起的文本粗体，但我仍然没有给出，但是 font-weight 属性的值不仅仅是 正常和粗体。

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

Answer 5

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

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