模糊 SVG 渲染
Fuzzy SVG Rendering
我无法解决我一直遇到的 svg->font 转换问题。
使用 Inkscape，我创建了一个新的 svg（尺寸 - 1000x1000），它在矩形路径创建模式下使用绘图工具具有星形。
我创建的路径是这样的：
bottom left -> top center -> bottom right -> left top -> right top -> left top
这是创建的文件：star.svg。目前这个文件没有问题。
现在，我已经使用了 fontcustom to compile this svg into a font, and you can look at the generated preview here。
此预览在 Safari 与 Chrome（或 Firefox 或 Opera）中看起来不同。但是它们都有一个填充区域。您可以自己查看预览 link，或者这里是它的外观截图：
Chrome:
野生动物园：
为什么这个填充区域排在第一位？为什么它在浏览器中有所不同？
一些上下文：
实际问题要大得多。我有一组由 Adobe Illustrator 中的某人创建的 svg，其中一些在 chrome 和其他浏览器中以类似的方式（不需要的填充）出现故障。 Safari 和 webkit2png 以某种方式正确呈现 svg 字体。所以我尝试按照上述步骤重新创建流程。
更多背景信息：
我也使用了很多人推荐的 icomoon 应用程序，但出于某种原因它只是给出了空白字形。
几乎在所有情况下，字体字形都是由填充形状组成的。他们不使用笔划（线）。因此，当您的 SVG 被转换为字体时，字体 SVG 会应用填充，即使它们之前没有填充。
浏览器之间的差异可能是因为每个浏览器可能加载不同的生成字体类型。例如。 woff 与 TTF 等
解决方法是设计您的 SVG，使其仅使用填充形状，不要依赖笔触（即线条颜色、宽度等）。如果您遵循以下规则，您的字形在转换时应该始终有效：
- 保持线条颜色为 "none" 或 "transparent",
- 切勿使用除黑色以外的任何填充颜色（即不要使用 "white" 打洞）
- 切勿让形状与自身或其他形状交叉。
所以，例如，对于你的星星，它应该设计成一个填充的星形物体，里面有一个星形孔。
我无法解决我一直遇到的 svg->font 转换问题。
使用 Inkscape，我创建了一个新的 svg（尺寸 - 1000x1000），它在矩形路径创建模式下使用绘图工具具有星形。
我创建的路径是这样的：
bottom left -> top center -> bottom right -> left top -> right top -> left top
这是创建的文件：star.svg。目前这个文件没有问题。
现在，我已经使用了 fontcustom to compile this svg into a font, and you can look at the generated preview here。
此预览在 Safari 与 Chrome（或 Firefox 或 Opera）中看起来不同。但是它们都有一个填充区域。您可以自己查看预览 link，或者这里是它的外观截图：
Chrome:
野生动物园：
为什么这个填充区域排在第一位？为什么它在浏览器中有所不同？
一些上下文：
实际问题要大得多。我有一组由 Adobe Illustrator 中的某人创建的 svg，其中一些在 chrome 和其他浏览器中以类似的方式（不需要的填充）出现故障。 Safari 和 webkit2png 以某种方式正确呈现 svg 字体。所以我尝试按照上述步骤重新创建流程。
更多背景信息：
我也使用了很多人推荐的 icomoon 应用程序，但出于某种原因它只是给出了空白字形。
几乎在所有情况下，字体字形都是由填充形状组成的。他们不使用笔划（线）。因此，当您的 SVG 被转换为字体时，字体 SVG 会应用填充，即使它们之前没有填充。
浏览器之间的差异可能是因为每个浏览器可能加载不同的生成字体类型。例如。 woff 与 TTF 等
解决方法是设计您的 SVG，使其仅使用填充形状，不要依赖笔触（即线条颜色、宽度等）。如果您遵循以下规则，您的字形在转换时应该始终有效：
- 保持线条颜色为 "none" 或 "transparent",
- 切勿使用除黑色以外的任何填充颜色（即不要使用 "white" 打洞）
- 切勿让形状与自身或其他形状交叉。
所以，例如，对于你的星星，它应该设计成一个填充的星形物体，里面有一个星形孔。