如何通过CSS放置弯曲的文本

Question

我正在建立一个PSD网页。在那里，我看到了一些有点弯曲的文字。

查看以上3张图片。它们不是直线。它们有点弯曲/倾斜/错误。那么，我如何通过CSS制作该文本？

Answer 1

看起来歪曲变换会起到作用：CSS3 skew at MDN

Answer 2

仔细观察时，文字的基线不是弯曲的，而是旋转的。这种转变可以通过以下方式完成：

transform: rotate(5deg);

请务必支持所有浏览器，例如：

-webkit-transform: rotate(5deg);

Answer 3

使用CSS3转换。确保您的目标浏览器支持它：http://caniuse.com/#feat=transforms2d 此外，您可能需要使用前缀使其在所有浏览器中都有效。

<p>Texty ipsum</p>

<style>
p {
    transform: rotate(-4deg);
}
</style>