Question

有没有办法逐渐从普通文本转换为斜体，每个字符都会略微改变倾斜角度？

Answer 1

罗宾的想法确实奏效了（DEMO），但是这个小提琴有很多不妥之处我不确定是否可以将它们纳入一条评论中。

首先，span是inline元素，transform适用于block元素。因此，您要么使用block或div这样的p元素，要么在display: block上设置span。

请勿使用skew ！ 使用skewX 。 skew出现在早期草案中，自那时起就被删除了。 Firefox 14甚至不支持它，但由于兼容性原因，它在Firefox 15中重新引入，仍可在Chrome，Safari和Opera中使用。

始终将未加前缀的版本放在最后。在即将推出的Firefox，Opera和IE版本中Transforms should be unprefixed。

您还需要在班级名称前加一个点。

这样的事情：

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

CSS部分只是

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

为了逐渐从普通文本转换为倾斜文本，您需要transitions或keyframe animations。

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

Answer 2

你的字体可能有完全不同的斜体和普通文字的字形，所以即使使用SVG疯狂聪明的它们之间的变形可能看起来很奇怪。

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

Answer 3

不是斜体字否，您只能选择normal或italic（和oblique，它们在排版中具有特定含义，但通常不在标准网络字体上。

然而，您可以使用CSS转换以非常讨厌的方式伪造它。 E.g：

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

进行测试

Answer 4

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

Answer 5

你可以通过SVG来实现，但是你将失去你通过图像获得的浏览器支持。 IE8及更早版本不支持SVG，IIRC。

渐变斜体？

5 个答案: