创建跨浏览器图标webfont

Question

我一直在将自己的网页作为web designer depot和intridea的起点文章。

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

我还引用了Github's octicon documentation - 在查看octicons如何比较浏览器时，它们看起来很棒！就我所见，没有明显的差异。 他们是如何实现这一目标的？

我正在使用inkscape并尝试了几个不同的svg启动器模板。设置为Set width: 1024并尝试了各种尺寸的图标，没有不同的结果。即512平方，并在基线下方对齐。

我的问题是，在创建webfont以获得字体的浏览器呈现之间的最小差异时，我需要遵循哪些规则？

Answer 1

这是一个涉及垂直指标的复杂问题。字体有三组这些。在'hhea'表中找到的第一组通常是Mac专用的。 “OS / 2”表中的其他两组与Windows（和Linux）相关。我们的想法是使这些价值观均衡。我们的生成器有一个奇怪的“修复垂直度量标准”功能，可以对这些功能进行最佳猜测。请注意，Github使用Generator来完成他们的图标。

我知道这与SVG字体无关，但我很确定这就是你的问题所在。使用不同的垂直指标值可以跨平台搞定基线。

一些阅读：

• http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
• http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
• http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

Answer 2

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

它可以很好地完成工作，但你必须测试不同图标的渲染。

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

Answer 3

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

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

Answer 4

我使用 Icomoon App 来创建 Emoji icon font 以及基于每个项目创建自定义图标字体。

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

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

有关详细信息，请参阅 Create webfont with Unicode Supplementary Multilingual Plane symbols 。