1

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

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

  1. Inkscape - 创建 960px x 960px 的矢量图标
  2. 在页面上居中并使用字体编辑器创建新字形
  3. 使用 freefontconverter.com 创建 .ttf 文件
  4. 使用 www.fontsquirrel.com/fontface/generator 获取 .ttf 文件并转换为各种其他文件类型（svg、eot、wof、svg、ttf）。所有标准选项，除了删除字距和自定义子集（仅英文字符）
  5. 在我的 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';
}

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

任何帮助是极大的赞赏。谢谢！

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

4

0 回答 0