Question

编辑*基于第一条评论，我相信我的问题是缺少字体提示与我的方法。有谁知道如何处理使用矢量软件创建的图标字体来解决字体提示（或缺少）问题？帮助赞赏！

我正在创建一个用于我的图标的字体（比使用图像更加灵活和高效）。但是，我的一些图标被扭曲了，我不知道为什么。即使非常简单的图标也是如此。我想也许这是我的方法。这就是我的工作：

Inkscape - 创建960px x 960px
将其置于页面中心并使用字体编辑器创建新字形
使用freefontconverter.com创建.ttf文件
使用.ttf文件并使用www.fontsquirrel.com/fontface/generator转换为各种其他文件类型（svg，eot，wof，svg，ttf）。所有标准选项，除了删除字距和自定义子集（只是英文字符）
在我的css样式表中使用以下代码（我没有提供代码，使用我在某处找到的指南，我认为它在我的书签中的某处）：

@font-face {
  font-family: 'iconFont';
  src: url('iconfont-webfont.eot');
  src: url('iconfont-webfont.eot?#iefix') format('embedded-opentype'),
       url('iconfont-webfont.svg#iconFont') format('svg'),
       url('iconfont-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.iconFont {
  display:inline-block;
  font-family:'IconFont';
}

起初我以为这是我老式的，糟糕的显示器，但只是换了一个新的，它仍然会发生。有时，某些图标的边缘会出现锯齿或歪斜。即使是简单的图标也会生效例如，带有方形边框的日历图标......由于某种原因，底部边框的厚度是侧边框的两倍。即使那些没有明显不好的也不会像图像图标那样清晰。但我不明白，因为文字字体很清晰...所以我一定做错了什么？

非常感谢任何帮助。谢谢！

如果有人能帮助确定我哪里出错了，我们将不胜感激。谢谢！

图标字体 - 失真（修复=字体提示？）

0 个答案: