Recreating Chrome's Faux Italics in SVG
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)"
- how can i get element height in javascript
- How to solve Invalid element(s) received for the 'color' property?
- Is it possible to check if certain CSS properties are defined inside the style tag with Javascript?
- Text border using css (border around text)
- jQuery how to add image from computer
- How to Ensure Each Table Column Occupies 25% Width and Allows Horizontal Scrolling in HTML/CSS?
- css animate from top to center
- How to style a react Link component?
- How to Right-align flex item?
- Match up ease-in-out with ease-out
- Is it possible to mix absolute and sticky positioning?
- Fonts not loading in Vite + React
- CSS difference between 0 and 0em
- Css min-height: fit-content does not work with resize
- Cell in css grid overflow if align-items: end is set
- CSS3 Question: how to have no box shadow on the top of a div?
- Is there a way to observe a DOM mutation of an element by a CSS selector and if so, how to do so?
- React native text going off my screen, refusing to wrap. What to do?
- Prevent BODY from scrolling when a modal is opened
- CSS image on top of another for website background
- Grid Having issues with a div sitting on top of a div with opacity
- context-stroke and context-fill for markers in SVGs on Chrome don't work, alternatives?
- CSS, fill all div width with text
- Play multiple CSS animations at the same time
- CSS set li indent
- Use :not selector to exclude a div and all its descendants
- css flex row with one element using horizontal scroll
- CSS Grid Row Height Safari Bug
- How can I get horizontal lines to appear surrounding Font Awesome icon?
- Have a sticky navbar on top of containing blocks