17

我一直在以网页设计师仓库和intridea的文章为起点制作自己的webfont 。

我知道不同的引擎以不同的方式呈现字体，但我遇到的问题是 firefox 呈现的字体高于 chrome - 在我显示字体的大小下，这非常明显（3 或 4 px - 在按钮上意味着它们'重新完全错位）。

我还参考了Github 的 occticon 文档- 在查看 occticons 如何比较浏览器时，它们看起来很棒！据我所知，没有明显的区别。他们是如何做到这一点的？

我正在使用 inkscape 并尝试了几个不同的 svg 入门模板。安装程序Set width: 1024已经尝试过各种尺寸的图标，但没有不同的结果。即 512pt 正方形并在基线下方对齐。

我的问题是在创建 webfont 时我需要遵守哪些规则才能获得浏览器渲染字体之间的最小差异？

4

4 回答 4

14

这是一个复杂的问题，涉及到所谓的垂直指标。字体具有三组这些。在“hhea”表中找到的第一组通常特定于 Mac。在“OS/2”表中找到的另外两组与 Windows（和 Linux）有关。我们的想法是使这些值相等。我们的生成器有一个奇怪的特性，叫做“Fix Vertical Metrics”，它可以很好地猜测这些。请注意，Github 使用生成器来完成他们的图标。

我知道这与 SVG 字体没有特别的关系，但我很确定这就是你的问题所在。具有不同的垂直度量值会破坏跨平台的基线。

一些阅读：

于 2012-07-28T01:30:10.633 回答
3

有一个 webapp，icomoon：http: //icomoon.io/app/

它使这项工作做得很好，但您必须测试不同图标的渲染。

如果您不想设计所有东西，他们会提供很多图标。

于 2012-11-20T05:00:30.867 回答
0

我有同样的问题，并通过手动设置所有三种类型的指标来解决它。

您可以在此处查看带有设置屏幕截图的我的工作解决方案：https://stackoverflow.com/a/20609766/955413

于 2013-12-16T11:30:00.027 回答
0

我使用Icomoon 应用程序创建Emoji 图标字体以及基于每个项目创建自定义图标字体。

Icomoon 应用程序允许您执行以下各项操作：

  • 从几种流行的图标字体中获取一个或多个图标
  • 上传其他字体，可以是图标字体，也可以是常规字体
  • 上传 SVG 文件以用作图标
  • 从任意数量的可用字体中组合任意数量的图标
  • 为您需要的任何字符设置 UNICODE 十六进制值
  • 导出和/或保存您创建的字体集

爱可梦

有关更多详细信息，请参阅使用 Unicode 补充多语言平面符号创建 webfont。

于 2014-12-18T10:53:10.647 回答