逐渐斜体？答案

【问题标题】：Gradual italics?逐渐斜体？
【发布时间】：2012-08-15 04:29:39
【问题描述】：

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

【问题讨论】：

是关于 html+css 的问题，还是关于在 php 中创建文本的图像？在第一种情况下，为什么是 [php] 标签？第二种情况，你用的是哪个图片库？
@CodesInChaos 只是文本。 PHP 标记，因为我认为它必须由后端编程语言完成。
我已经删除了你的 php 标签，因为你的服务器端技术与客户端文本渲染无关。仅当您在服务器上呈现时，您的服务器端技术才有意义。

【解决方案1】：

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

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

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

始终将无前缀版本放在最后。 Transforms should be unprefixed 在即将发布的 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);
}

为了从普通文本逐渐过渡到倾斜文本，您需要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); }
}

【讨论】：

我认为 OP 正在请求一行字符，每个字符都比前一个更斜体。好吧，这就是我在回答中所做的。猜猜我们会发现:)
其实这是一个非常有趣的想法。那么它的外观可能取决于文本的长度和倾斜角度增加的速率dabblet.com/gist/3396122

【解决方案2】：

您的字体很可能具有完全不同的斜体字形和普通文本，因此即使使用 SVG 疯狂巧妙地在它们之间进行变形也可能看起来很奇怪。

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

【讨论】：

【解决方案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/

【讨论】：

糟糕，我的错。我已经更新了它的工作原理，我将编辑我的答案。我忘记了，他们需要是 block 或 inline-block 才能应用转换。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：