创建一个跨浏览器图标web字体(Creating a cross browser icon webf

我一直在做我自己的web字体以从起点文章网页设计师车厂和intridea 。

我知道不同的引擎渲染字体不同，但我遇到的问题是，火狐比呈现高铬的字体 - 在尺寸我显示的字体，这是非常明显的（3或4个像素 - 其上的按钮，意味着他们”重新完全不对齐）。

我也引用GitHub的octicon文档 -退房时如何octicons比较浏览器，他们看起来棒极了！ 没有明显的区别，据我可以看到。 他们是如何做到这一点？

我使用Inkscape中，并尝试了几个不同的SVG入门模板。 安装程序Set width: 1024 ，并试图在各种尺寸的图标，没有不同的结果。 即512pt广场和刚下基线对齐。

我的问题是什么规则，我需要建立一个web字体来获取字体的浏览器渲染差距最小的时候impliment？

Answer 1:

这是一个复杂的问题，涉及到一些所谓的垂直度量。 A字型有三套这些。 第一盘，在“hhea”表中发现，一般都是具体到Mac。 另外两组，在“OS / 2”表中发现涉及到Windows（和Linux）。 这个想法是让这些值相等。 我们的生成有一个功能叫做奇怪的是“修复垂直度量”，这在这些做了最好的猜测。 需要注意的是Github上使用的发生器完成他们的偶像。

我知道这并不具体涉及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:

有一个Web应用程序，icomoon： http://icomoon.io/app/

它使工作得很好，但你要测试的不同图标的渲染。

他们offert很多图标，如果你不想做设计的一切。

Answer 3:

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

：你可以在这里看到的截图设置我工作的解决方案https://stackoverflow.com/a/20609766/955413

Answer 4:

我用Icomoon应用程序创建的绘文字图标字体以及为在每个项目的基础上创建自定义图标字体。

该Icomoon应用程序允许你做以下每一项：

• 从几个流行的图标字体获得一个或多个图标
• 上传其他字体，这可能是图标字体，还支持常规字体
• 上传SVG文件作为图标使用
• 结合任意数量的图标从任意数量的可用字体
• 设置你需要哪个字符UNICODE十六进制值
• 出口和/或保存您创建的字体集

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

文章来源: Creating a cross browser icon webfont