6

有没有办法从普通文本逐渐过渡到斜体，每个字符都会稍微改变倾斜角度？

4

5 回答 5

6

Robin 的想法确实有效（DEMO），但是那个小提琴有很多问题，我不确定我是否可以将它们放入一条评论中。

首先，span是一个inline元素并且transform作用于block元素。因此，您要么使用类似or的block元素，要么在.divpdisplay: blockspan

不要使用skew！使用skewX. skew出现在早期草稿中，此后已被删除。Firefox 14 甚至不支持它，尽管由于兼容性原因它在 Firefox 15 中重新引入，并且仍然适用于 Chrome、Safari 和 Opera。

始终将无前缀版本放在最后。在即将到来的 Firefox、Opera 和 IE 版本中，转换应该没有前缀。

您还需要在类名前加一个点。

像这样的东西：

<div class="skewme">Tyrannosaurus Rex</div>

CSS部分很简单

.skewme {
   -webkit-transform: skewX(-20deg);
      -moz-transform: skewX(-20deg);
        -o-transform: skewX(-20deg);
           transform: skewX(-20deg);
}

为了从普通文本逐渐过渡到倾斜文本，您需要过渡或关键帧动画。

HTML：

<div class="skewme1">Tyrannosaurus Rex</div>

CSS：

.skewme1 {
    -webkit-animation: slowskew 1.5s infinite alternate;
           -moz-animation: slowskew 1.5s infinite alternate;
             -o-animation: slowskew 1.5s infinite alternate;
                animation: slowskew 1.5s infinite alternate;
}
@-webkit-keyframes slowskew {
    to { -webkit-transform: skewX(-20deg); }
}
@-moz-keyframes slowskew {
    to { -moz-transform: skewX(-20deg); }
}
@-o-keyframes slowskew {
    to { -o-transform: skewX(-20deg); }
}
@keyframes slowskew {
    to { transform: skewX(-20deg); }
}
于 2012-08-19T16:12:12.387 回答
3

你的字体很可能有完全不同的斜体字形和普通文本，所以即使使用 SVG crazy-clever 在它们之间变形也可能看起来很奇怪。

另一种方法是应用CSS3 2D 倾斜变换。这不会在正常形式和斜体形式之间转换，而只会倾斜正常形式。这可能会或可能不会给您带来视觉上吸引人的结果，具体取决于您的字体。旧浏览器也不支持它。

于 2012-08-19T15:32:01.343 回答
3

不是斜体不，你只能选择normal或italic（oblique它在排版中具有特定含义，但通常不适用于标准网络字体）。

但是，您可以使用 CSS 转换以非常讨厌的方式伪造它。例如：

<span class="skew0">R</span><span class="skew1">R</span><span class="skew2">R</span><span class="skew3">R</span>

和：

span { display: inline-block; }
.skew1 { transform: skewX(-5deg); }
.skew2 { transform: skewX(-10deg); }
.skew3 { transform: skewX(-15deg); }

skew()有被从规范中删除的危险——它已经从 Mozilla 中删除，但由于不兼容的问题被重新添加——显然你需要添加标准的供应商前缀。

测试：http: //jsfiddle.net/GtQXw/1/

于 2012-08-19T15:35:14.140 回答
1

是的 - 你必须创建一个图像。否则没有

于 2012-08-19T15:14:03.540 回答
1

您可能可以通过 SVG 来做到这一点，但是您将失去通过图像获得的浏览器支持。IE8 及更早版本不支持 SVG、IIRC。

于 2012-08-19T15:15:42.133 回答