SVG 上的字体渲染不正确（取决于浏览器）答案

【问题标题】：Fonts rendered incorrectly on SVG (Depending on browser)SVG 上的字体渲染不正确（取决于浏览器）
【发布时间】：2014-12-22 19:13:57
【问题描述】：

我有这个 SVG：

http://wefix.cf/Resources/wefix2.svg

问题是在 Chrome 中，它看起来很好，但是当切换到 Internet Explorer 时，字体会改变。我使用的字体是 Arial Rounded MT。

我还想将 svg 转换为 png，但是执行此操作的每个在线服务都会返回具有不同字体的图像。为什么会这样？

作为一个临时解决方案，我有一个IE查询，这样当浏览器是IE时，就会显示这个图像：

http://wefix.cf/Resources/wefix.svg

这在 Chrome 上看起来不太好......

由于某种原因，我无法让 svg 跨浏览器工作。我无法将它们中的任何一个转换为 png，它不断返回带有错误字体的图像。

【问题讨论】：

为什么不能使用 Inkscape？
你能在illustrator中打开svg吗？如果是这样，您将字体转换为常规路径。所以浏览器会将其解释为矢量绘图，而不是每个浏览器上的字体。
当我在 Illustrator 中打开它时，它给了我很多错误并且显示不正确，阴影上没有模糊。我用 Inkscape 创建了这个？ inkscape 中是否有我不知道的功能？
问题解决了！谢谢普拉文！！！用 InkScape 保存它！你真棒我的朋友！

标签： css svg fonts

【解决方案1】：

如果http://wefix.cf/Resources/wefix2.svg适用于除IE以外的所有浏览器，而http://wefix.cf/Resources/wefix.svg适用于IE，则可以使用条件cmets：

<!--[if IE]>
    <img src="http://wefix.cf/Resources/wefix.svg" alt="Logo" />
<![endif]-->
<!--[if !IE]> -->
        <img src="http://wefix.cf/Resources/wefix2.svg" alt="Logo" />
<!-- <![endif]-->

【讨论】：

您的意思是 IE 支持条件 cmets。 IE9及以下...对吗？
@Paulie_D 是的。 IE 10 及以上版本不支持 CC。
我已经这样做了，但使用 JS 以便我也可以识别 IE 10 和 11。但这并不能解决问题，因为我无法将它们中的任何一个转换为 png。