I'm using some google web fonts for dynamically rendered svg logos. The fonts I'm using don't have italic versions and I'm actually pretty happy with the way Chrome fakes it when I put font-style="italic"
. The only problem is that firefox doesn't seem to fake it at all. This fiddle shows it: http://jsfiddle.net/a6C32/3/
Is there a set way of recreating that Chrome functionality across all browsers?
Just to clarify what I'm seeing: Chrome (36.0.1985.125 OSX):
Firefox (31.0 OSX):
UPDATE: so after playing around with it some more, it turns out Firefox will do faux italics unless the text element also has a stroke
defined on it: http://jsfiddle.net/a6C32/4/
Definitely a bug in Mozilla. My quick fix with SVG magic:-
font-style="normal" transform="translate(10,0) skewX(-20)"