在SVG中重新创建Chrome的Faux斜体

时间:2014-08-05 05:17:20

标签: css firefox svg font-face google-webfonts

我使用一些谷歌网络字体来动态渲染svg徽标。我使用的字体不具有斜体版本,而且当我放置font-style="italic"时,我对Chrome伪造它的方式非常满意。唯一的问题是firefox似乎根本没有伪造它。这个小提琴表明了它:http://jsfiddle.net/a6C32/3/

是否有一种方法可以在所有浏览器中重新创建Chrome功能?

只是为了澄清我所看到的: Chrome(36.0.1985.125 OSX):

Chrome Faux Italics

Firefox(31.0 OSX):

enter image description here

更新:所以在玩了一些之后,事实证明Firefox会做人造斜体,除非文本元素也定义了stroke它:http://jsfiddle.net/a6C32/4/

1 个答案:

答案 0 :(得分:2)

绝对是Mozilla中的一个错误。我对SVG魔术的快速解决方法: -

font-style="normal" transform="translate(10,0) skewX(-20)"