Search code examples
css

Adding More Slant To Italic Text

I was curious as to if you can impact italic text with more of a slant with CSS? If so, how can this be accomplished?

Solution

  • You can simulate a custom slant with CSS3 skew transformations (although it will not look as great as a real italic font).

    Here's an example:

    .slant {
    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
}
    <p class="slant">Some text</p>