模糊SVG渲染

Question

我无法找出我一直在使用svg->字体转换的问题。

使用Inkscape，我创建了一个新的svg（尺寸 - 1000x1000），它具有使用矩形路径创建模式中的绘制工具的形状星形。

我用来创建的路径是这样的：

bottom left -> top center -> bottom right -> left top -> right top -> left top 

下面是创建的文件：star.svg。目前这个文件没有问题。

现在，我用fontcustom将这个svg编译成字体，并且您可以查看生成的预览here。

此预览在Safari和Chrome（或Firefox或Opera）中看起来不同。但是它们都有一个充满的区域。您可以检查预览链接自己，或者这里是它的外观的截图：

铬：

Safari浏览器：

为什么的这种填充区域在未来第一名？为什么它在浏览器中有所不同？

---

上下文的位：

的实际问题是更大的。我有一套由Adobe Illustrator中的人创建的svgs，其中一些在chrome和其他浏览器中以类似的方式（不需要的填充）出现问题。 Safari和webkit2png以某种方式正确渲染svg字体。所以我试图在上述步骤中重新创建这个过程。

更多背景：

我也用icomoon应用其中许多建议，它只是给出了一些原因空白字形。

Answer 1

在几乎所有情况下，字体字形都由填充形状组成。他们不使用笔画（线）。所以当你的SVG被转换为字体时，字体SVGs会得到一个填充，即使它们之前没有。

浏览器之间的差异可能是由于每个浏览器可能加载了不同的生成字体类型。例如。 woff和TTF等。

修复是设计你的SVG，使他们只使用填充的形状和不要依靠笔画（即线条的颜色，宽度等）。如果你遵循下列规则，你的字形是否应该转换时，始终工作：

1. 保持你的线颜色为“无”或“透明”，
2. 切勿使用任何填充颜色除了黑色（即没有。用“白色”打孔）
3. 绝对不要让形状横跨自己或其他形状。

因此，例如，在你的恒星的情况下，它应该被设计成一个带星形孔的充满星形的物体。