6

通常のテキストからイタリック体に徐々に移行し、文字ごとに傾斜角をわずかに変更する方法はありますか?

4

5 に答える 5

6

Robin のアイデアは機能します ( DEMO ) が、そのフィドルには非常に多くの問題があり、それらを 1 つのコメントに収めることができるかどうか確信が持てませんでした。

まず、要素で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

あなたのフォントはイタリック体と通常のテキストでまったく異なるグリフを持っているかもしれません。

別の方法として、 CSS3 2D 傾斜変換を適用することもできます。これは、通常の形式とイタリック体の間で遷移しませんが、通常の形式を傾けるだけです。フォントによっては、視覚的に魅力的な結果が得られる場合とそうでない場合があります。また、古いブラウザではサポートされていません。

于 2012-08-19T15:32:01.343 に答える
3

イタリック体ではなく、normalまたはの選択肢しかありませんitalic(obliqueタイポグラフィでは特定の意味がありますが、通常、標準の Web フォントでは意味がありません)。

ただし、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 に答える