创建一个跨浏览器图标 webfont

Posted 2023-03-06

【中文标题】创建一个跨浏览器图标 webfont

【英文标题】：Creating a cross browser icon webfont

【发布时间】：2012-07-23 19:28:17

【问题描述】：

我一直以web designer depot 和intridea 的文章为起点，制作自己的网络字体。

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

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

我正在使用 inkscape 并尝试了几个不同的 svg 入门模板。设置是Set width: 1024 并尝试了各种大小的图标，没有不同的结果。即 512pt 正方形并在基线下方对齐。

我的问题是，在创建网络字体时，我需要遵守哪些规则才能使浏览器呈现字体的差异最小？

【参考方案1】：

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

【讨论】：

感谢您的回复 :) 毫无疑问，您是对的，垂直指标是造成差异的原因。在 inkscape 中创建原始 SVG 以设置/优化垂直指标时，我可以采取任何步骤吗？我看不到上升/下降/线间距/基线等的任何设置/值。我已经通过您的修复垂直度量工具运行了字体，并且浏览器（webkit 和壁虎）之间的对齐方式很差，即使在同一个操作系统（Linux）。我只能假设我的画布在 inkscape 中设置不正确（即使我尝试了各种入门 webfont SVG）？

我们没有任何使用 Inkscape 创建字体的经验，但我希望看到您创建的 TTF 来检查内部结构。请随时通过电子邮件将其发送给我们：您好，在 fontsquirrel.com

【参考方案2】：

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

它可以很好地完成工作，但您必须测试不同图标的呈现。

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

【讨论】：

到目前为止，我在使用 icomoon 时没有遇到任何问题。但我没有在 Windows 机器上测试它。在 Mac OSX 上的 Safari、Firefox、Chrome 上运行良好。在迄今为止测试的所有 ios 设备以及 android 上的 Chrome 和 Firefox 上也能正常工作。

icomoon.io 链接已于 2015 年 mai 失效

【参考方案3】：

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

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

【参考方案4】：

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

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

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

更多详情，请参阅Create webfont with Unicode Supplementary Multilingual Plane symbols。