我可以使用CSS拉伸文本吗? [英] Can I stretch text using CSS?

问题描述

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

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 2D变换.几乎所有现代浏览器(包括IE9 +)都支持此功能.这是一个例子.

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

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

提示: :您可能需要为延伸的文本添加边距，以防止文本冲突.

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

这篇关于我可以使用CSS拉伸文本吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！