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

标签 css svg fonts font-face custom-font

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

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

最佳答案

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

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

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

编辑:

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

关于css - 自定义字体图标和 Simple-line-icons 不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36575335/

相关文章:

css - 使用 CSS 禁用换行符

svg - 如何防止 Inkscape 在导出 SVG 时添加变换?

html - 为什么 "Source Sans Pro"在 Chrome 中以不正确的字体粗细显示为 "font-weight:200"?

ios - 在 WKWebView 中使用自定义字体

javascript - 根据 div 宽度调整文本大小

Javascript 移动网站

css - 如何只选择第一个和最后一个<th>?

CSS:如何根据 sibling 的数量应用可变宽度

javascript - 动画 SVG,圆形描边悬停

javascript - 我们如何在浏览器中缓存内联 SVG?