如何创建字体，其中字形覆盖100％的字体大小高度？

Question

我目前正在开发自己的自定义字体，用于我想要基于矢量的符号和其他图形。问题是如何创建字体，其中字形覆盖给定字体大小的整个高度。

如果我有40px高度的块并将font-size和line-height设置为40px，我希望字形的最顶部位于块顶部，最底部部分位于底部块。换句话说，在给定相同字体大小/行高的情况下，字形应垂直完全覆盖相同高度的块。

嗯，问题是，它不...... 我已经尝试将基线和下降设置为0，并设置x高度，上限和上升到例如1500.如果我然后在这些垂直线之间绘制所有字形，它们都显示所需的方式。除了在Mac上！在Mac FF中，它们向顶部偏移约50％。在Safari和Chrome中，它们根本不会显示，除非您设置“display：inline-block”而不是“display：block”。

我还尝试在3.2版中设置一个全新的字体，默认指标等。在我看来，下降线决定了字形最下端的呈现位置。另一方面，顶部似乎介于帽子高度和上升线之间，但更多的是帽子高度。如果我从下降到上升绘制一个字形，字形顶部会被切断。如果我从下降到帽子高度绘制一个字形，则在顶部和字形顶部之间有一个空格。

我是否可以应用任何“标准”指标，如何定位我的字形以获得它如上所述？

此处的字体副本位于此处：
https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/Custom-Icon.ttf

修改 这里可以找到一个工作实例：
https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/index.html

左侧块包含我自定义字体的元素（案例a）。下一个块包含来自Twitter Bootstrap中使用的字体的元素（案例b）。最后两个块（情况c和d）包含我使用类型3.2的默认设置制作的测试字体中的元素。第一个测试元件（c）在下降线处具有最低点，在顶部高度线处具有最高点。最后一个元素（d）的最低点位于基线，最高点位于x高度线。

如何在Ubuntu和Windows7上的所有浏览器中呈现（在本例中为Ubuntu中的FF）：

这是理想的行为！

它如何在Mac上呈现FF：

如何在Mac上的Safari中渲染：

由于b，c和d在所有浏览器和所有操作系统中都呈现相同的效果，因此在我看来，我自己的自定义字体在指标中缺少和/或具有一些相互矛盾的信息，以使其一致地呈现。

Answer 1

事实证明，为了使字体在所有平台上运行，必须应用更多指标。似乎已经完成的工作是在高级指标部分设置 hhea / typo ascender 。

我添加了一些我应用的设置截图，这对我有用。 下降线设置为0 ，上升线以及上限和 x-height 为所有设置为1250.我选择1250，因为我之前看过的字体有这个数字，但它似乎并不重要，只要它对所有上升和高度都相同。我认为x高度在我的情况下确实无关紧要，因为所有字形都设置为相等的高度。也许帽子高度也没有必要，请对此发表评论！

我还添加了FontSquirrel设置的屏幕截图。我不确定哪些部分是必要的，但我更愿意安全。我取消了“修复垂直度量标准”选项，因为它很可能是一个不需要的“黑盒子”。 x高度匹配设置为无，但可能无关紧要。

重要的是 Base64编码设置。如果没有这个，你就无法从另一个域加载字体，这是由于浏览器实现了SOP（同源策略）。有关详情，请点击此处： @font-face fonts only work on their own domain。

我真的不知道是否有必要使用我在创建字体时使用的相同的Em Square值，但这似乎是合理的。坦率地说，我甚至不知道这意味着什么...： - ）

如果您认为可以为更好地理解这些指标做出贡献，或者如果设置了任何错误/不必要的值，请添加评论！

类型3.2中的字体度量设置

3.2版中的高级字体指标设置

雕文示例

Answer 2

字体中图标的高度由font-size决定。将其设置为40像素，您的图标将为40像素高。这与任何字体度量无关，如基线高度。唯一的条件是你的图标设计应该涵盖完整的“画板”1高度。您链接的字体就是这样，所以问题不在那里。

很可能你遇到了Firefox-on-Mac特有的问题。如果您发布一个示例，那么熟悉该设置的人可能会有帮助吗？

1我从Illustrator中选择了“画板高度”一词。它是画布的高度:(左图标是全高，右图标不是）

Answer 3

您可以使用Icommoon app。它允许您使用来自直观Web界面的现有字体，导入的SVG等字形创建自己的自定义字体。我自己用它来创建Emoji icon font以及项目特定的图标字体。

使用Icomoon应用程序，每个字形都可以在矩形网格中进行镜像，旋转，调整大小或重新定位。网格本身也可以调整大小。请参阅下面的屏幕截图，了解该界面的概述。