模糊 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：

为什么这个填充区域首先出现？为什么在浏览器中不一样？

---

一点上下文：

实际问题要大得多。我有一组由 Adob​​e Illustrator 中的某人创建的 svg，其中一些在 chrome 和其他浏览器中以类似的方式（不需要的填充）出现故障。 Safari 和 webkit2png 以某种方式正确呈现 svg 字体。所以我尝试在上述步骤中重新创建流程。

更多上下文：

我还使用了许多人推荐的 icomoon 应用程序，但由于某种原因它只是给出了空白字形。

Answer 1

在几乎所有情况下，字体字形都由填充形状组成。他们不使用笔划（线）。因此，当您的 SVG 被转换为字体时，字体 SVG 会被应用填充，即使它们之前没有填充。

浏览器之间的差异可能是因为每个浏览器可能会加载不同的生成字体类型。例如。 woff vs TTF 等。

解决方法是设计您的 SVG，使它们仅使用填充形状并且不要依赖于笔触（即线条颜色、宽度等）。如果您遵循以下规则，您的字形在转换时应该始终有效：

1. 保持线条颜色为“无”或“透明”，
2. 切勿使用除黑色以外的任何填充颜色（即不要使用“白色”来打孔）
3. 切勿让形状与自身或其他形状交叉。

因此，例如，对于您的星星，它应该被设计为一个填充的星形物体，其中有一个星形孔。