I'm using <em> to make part of an @font-face styled <h1> italicized. The problem I'm having is that it's too italicized.
I'm using the font Impact, which, to my knowledge, does not have an italic version. In Photoshop, the text is only partially slanted using the slanted text option in the charter panel. With <em> on the site, though, it's extremely slanted. Is there any way to adjust this with CSS? Or does anyone have a truly italic version of Impact I can use?
If using Impact is, for whatever reason, absolutely mandatory, you can mimic italics using CSS3. http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_skew
However, this isn't supported in a lot of older browsers (and some newer ones) so I'd be hesitant. Considering you want to change how Impact actually wants, you probably just want a different font, but that still requires CSS3 to load properly, unless you intend to generate some images on the server side for your headers, which I hugely don't recommend. http://www.w3schools.com/css3/css3_fonts.asp
My recommendation? Just use the CSS3 skew on the <em> tag. In worst case scenario, a browser doesn't support it, and it's slightly too italicized. That's not a big deal. In best case scenario, your site looks great! If the original italics are wayyyyy too much for you, I would remove them on the <em> tag, and just do my solution anyway. That way, if CSS3 isn't supported, you still get a nice, Impact header.