11

我想将文本向后斜体或以与当前文本相反的方式向左倾斜。这可以在 HTML/CSS 甚至 Javascript/jQuery 中实现吗？

4

6 回答 6

8

我更新了 jos 的演示以使用 jQuery 将每个字母包装在一个跨度中，然后使用Mozilla 的转换文档和演示中的示例转换每个字母：

HTML

<div id="skewed">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi.
  Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a
  malesuada erat.
</div>

jQuery

// html function requires jQuery 1.4+
$('#skewed').html(function (i, h) {
    h = h.replace(/\s+/g, '\u00a0').split('');
    return '<span>' + h.join('</span><span>') + '</span>';
});

CSS

#skewed {
    font: 24px Georgia, sans-serif;
    background: #ccc;
    padding: 10px 20px;
}
#skewed span {
    display: inline-block;
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */
    -webkit-transform:  skewx(20deg);
          -o-transform: skewx(20deg);
             transform: skewx(20deg);
}
于 2013-02-23T00:14:25.300 回答
5

我想这可能是你正在寻找的？jsFiddle 稍微
玩一下代码。否则很确定这是不可能的。您可以在图像编辑软件中执行此操作，例如 Paintshop 等。

#skewed {
font: 21px Impact, sans-serif;
text-align: center;
background: #ccc
}
#skewed {
 width:             350px;
 height:            140px;

 -moz-transform:    skew(-5deg, -5deg);
 -o-transform:      skew(-5deg, -5deg);
 -webkit-transform: skew(-5deg, -5deg);
 transform:         skew(-5deg, -5deg);
}

<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div>

 <!--[if IE]>
 <style>
 /*
 * The following two rules are for IE only and
 * should be wrapped in conditional comments.
 * The -ms-filter rule should be on one line 
 * and always *before* the filter rule if
 * used in the same rule.
 */

#skewed {

  /* IE8+ - must be on one line, unfortunately */ 
 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, 
 M12=-0.08748866352592455,M21=-0.08748866352592455, M22=1, 
 SizingMethod='auto expand')";

 /* IE6 and 7 */ 
 filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1,
        M12=-0.08748866352592455,
        M21=-0.08748866352592455,
        M22=1,
        SizingMethod='auto expand');


/*
 * To make the transform-origin be the middle of
 * the object.    Note: These numbers
 * are approximations.  For more accurate results,
 * use Internet Explorer with this tool.
 */
  margin-left: -9px; 
  margin-top: -18px;

}
</style>
<![endif]-->​
于 2012-08-15T19:56:40.040 回答
2

您也许可以旋转文本。

http://snook.ca/archives/html_and_css/css-text-rotation

似乎很难，但您可能必须按每个字符执行此操作。不完全是预期的倾斜效果，但很接近。

于 2012-08-15T19:52:20.887 回答
2

我认为唯一的方法是使用一种向后倾斜的特殊字体。

于 2012-08-15T19:52:39.290 回答
2

我相信您唯一真正的选择是找到（或创建）具有向后斜体字形的字体，并通过自定义将其嵌入到您的网页中@font-face。

为此，您可以使用许多在线字体生成器之一，例如FontSquirrel

于 2012-08-15T19:54:36.077 回答
0

使用左倾斜体兼容字体并将其嵌入到您的网站中，例如这个。这里有免费的替代品。

于 2017-08-13T13:56:41.903 回答