css - 自定义字体图标和 Simple-line-icons 不同

Question

我在网站上使用简单线条图标。现在我需要使用上述包中缺少的自定义图标。我有设计师发送的 SVG 文件，但是当我将此文件转换为字体类型(ttf、woff、eot 等)时，对于相同的字体大小和行高，我确实得到了不同的视觉外观。我怎样才能将它转换成与 Simple Line Icons 集中的图标相似？我需要自定义字体创建软件吗？要比较和调整字形属性？

仅供引用，我在 icomoon.io 应用程序的帮助下转换了 SVG 文件并创建了自定义字体集。

Answer 1

将 SVG 缩放到相对于字体中其他字形的大小似乎是个问题。

您可以尝试使用字体编辑工具，例如:“FontForge”(https://fontforge.github.io/en-US/)来准确实现这一点。

确保 SVG 字形构造良好，方法是检查顶点是否正确闭合，不要太复杂等，因为它可能有助于转换和渲染。

编辑:

还要检查 SVG 字形的大小与 SVG 元素大小的关系。如果字形太大(或太小)而无法很好地适应包含的 SVG 元素(文档)的宽度和高度参数 - (用作字形框大小)那么您将遇到其相对于另一个的大小问题字体中的字形。