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

我将回答文本的水平拉伸,因为垂直是容易的部分 - 只需使用"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只是用于show,浏览器仍然看到元素在定位其他元素时的原始大小).

scaleY减少文本的高度,使其与旁边的文本相同.

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

margin-bottom设置为负值,以便下一行不会远远低于 - 最好是百分比,这样我们就不会改变行高属性. vertical-align设置为top,以防止文本浮动到其他高度之前或之后(因为拉伸文本的实际大小为32px)

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

问题是要求一种方法来防止由拉伸引起的文本的大胆,我仍然没有给出一个,但是font-weight属性具有的值多于普通和粗体.

我知道,你只是看不到,但如果你搜索适当的字体,你可以使用更多的值.

Answer 3

CSS font-stretch 现在在所有主要浏览器中都受支持（iOS Safari 和 Opera Mini 除外）。找到支持扩展字体的通用字体系列并不容易，但找到支持压缩字体很容易，例如：

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

Answer 4

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

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

.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 5

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