テキストを後方にイタリック体にする方法は？

Question

私はこの現在のテキストと逆の方法で、テキストを左または左にイタリック体にしたいと思います。これはHTML/CSSやJavascript/jQueryでも可能ですか？

Answer 1

として、多くのオンラインフォントフェイス発電機のいずれかを使用することができますか？ jsFiddle
コードを少し演奏してください。そうでなければ不可能だと確信しています。あなたは、など、など塗装工場などの画像編集ソフトでこれを行うことができます

#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]-->​  

Answer 2

テキストを回転させることができます。

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

難しいようだが、あなたはおそらく、文字単位でこれを行う必要があります。かなり意図された歪曲効果ではなく、近いです。

Answer 3

私は唯一の方法は、後方に傾いている特殊なフォントを使用することだと思います。

Answer 4

私の考える唯一の本当の選択肢は、後方にイタリック体の字形を持つフォントを見つけ出す（または作成する）ことで、カスタム@font-faceであなたのウェブページに埋め込むことだと思います。そのために

私は、これはあなたが探しているものかもしれないと思うようにFontSquirrel

Answer 5

私はMozilla's transformからの例を使用して各文字を変換し、その後、スパン内の各文字をラップするためにjQueryを使用するためのヨスデモを更新ドキュメント& demo：

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の

あなたのウェブサイト this oneのような左に傾いたイタリック互換フォント、に

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

Answer 6

Use and embed。無料の代替品がありますhere。