CODEWITHSUNDEEP
css
Jeff Davidson
Jeff Davidson

Reputation: 1929

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?

Upvotes: 14

Views: 18051

Answers (3)

Francisco Paulo
Francisco Paulo

Reputation: 6322

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>

Upvotes: 24

Ryan
Ryan

Reputation: 91

You can also use 

#example {
    font-style: oblique 50deg;
}
<p id="example">Lorem ipsum dolor sit amet</p>

(you can change 50 to what angle you want)

Upvotes: 9

Curtis
Curtis

Reputation: 103418

With standard font-style in CSS, it is not possible to customise the italic state.

This is up to the browsers own preference and the fonts italic state.

Upvotes: 5

Related Questions