Gradual italics? | 易学教程

问题

Is there a way to gradually transition from normal text into italics changing the slant angle ever so slightly with each character?

回答1:

Robin's idea does work (DEMO), but there are so many things wrong with that fiddle I wasn't sure I could fit them into one comment.

First of all, span is an inline element and transform works on block elements. So you either use a block element like div or p or you set display: block on the span.

Don't use skew! Use skewX. skew was present in the early drafts and it has been removed since. It isn't even supported by Firefox 14, though it was reintroduced in Firefox 15 due to compatibility reasons and still works in Chrome, Safari and Opera.

Always put the unprefixed version last. Transforms should be unprefixed in the coming versions of Firefox, Opera and IE.

You also need a dot in front of the class name.

Something like this:

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

with the CSS part being simply

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

In order to gradually transition from the normal text to the slanted text you'll need transitions or 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); }
}

回答2:

Your font may well have completely different glyphs for italics and normal text, so even morphing between them using SVG crazy-clever might look weird.

An alternative would be to apply a CSS3 2D skew transform. This won't transition between the normal and italic forms, but would just slant the normal form. This may or may not give you a visually-appealing result, depending on your font. It's also not supported in older browsers.

回答3:

Not with italics no, you’ve only got a choice of normal or italic (and oblique which has a specific meaning in typography but generally not on standard web fonts).

You could however fake it in a really nasty fashion with CSS transforms. E.g.:

<span class="skew0">R</span><span class="skew1">R</span><span class="skew2">R</span><span class="skew3">R</span>

and:

span { display: inline-block; }
.skew1 { transform: skewX(-5deg); }
.skew2 { transform: skewX(-10deg); }
.skew3 { transform: skewX(-15deg); }

skew() is in danger of being removed from the spec – it’s already been removed from Mozilla but was added back in due to incompatibility worries – and you’ll obviously need to add in the standard vendor prefixes.

Test at: http://jsfiddle.net/GtQXw/1/

回答4:

Yes - You have to create an image. Otherwise no

回答5:

You could probably do it through an SVG, but then you'll forfeit the browser support you'd get through an image. IE8 and earlier does not support SVGs, IIRC.

来源：https://stackoverflow.com/questions/12027563/gradual-italics

标签

html

css

text

typography