Fonts 如何创建字形覆盖字体大小高度100%的字体？

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

如果我有一个高度为40px的块，并将字体大小和线条高度设置为40px，我希望字形的最顶部位于块顶部，最底部位于块底部。换句话说，如果给定相同的字体大小/行高，glyph应该垂直完全覆盖相同高度的块

问题是，它不。。。 我已经尝试将基线和下降设置为0，并将x高度、上限高度和上升设置为eg 1500。如果我在这些垂直线之间绘制所有图示符，它们都会以所需的方式显示。除了在Mac上！在Mac FF中，它们与顶部的偏移量约为50%。在Safari和Chrome中，它们根本不会显示，除非您将“display:inline block”设置为“display:block”

我还尝试在类型3.2中设置一种全新的字体，使用默认的度量值等。在我看来，下降线决定了字形最底端的渲染位置。另一方面，顶部似乎在帽子高度和上升线之间，但更多的是帽子高度。如果我从下降到上升绘制一个雕文，雕文顶部会被砍掉。如果我从“下降”到“上限高度”绘制一个图示符，则块顶部和图示符顶部之间有一个空格

是否有任何我可以应用的“标准”指标，以及我应该如何定位我的标志符号以获得如上所述的指标

字体当前状态的副本位于此处：

编辑： 可以在这里找到一个工作示例：

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

它在Ubuntu和Windows7（在本例中为Ubuntu中的FF）的所有浏览器中的呈现方式：

这是理想的行为

它在Mac上的FF中的渲染方式：

它在Mac上的Safari中的呈现方式：

---

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

字体中图标的高度由

字体大小决定。将其设置为40px，图标将有40像素高。这与任何字体度量无关，如基线高度。唯一的条件是你的图标的设计应该覆盖整个“艺术板”的高度。链接到的字体就是这样做的，所以问题不在这里

最有可能的情况是，您遇到了针对Mac的Firefox问题。如果您发布一个示例，也许熟悉该设置的人可以提供帮助

我从Illustrator那里得到了术语“艺术板高度”。这是画布的高度：（左图标是全高，右图标不是）

事实证明，为了让字体在所有平台上都能工作，还需要应用一些其他指标。似乎是在高级度量部分设置了hhea/typo ascender

我添加了一些我应用的设置的屏幕截图，这些设置对我很有用。下降线设置为0，上升线以及帽高和x高均设置为1250。我选择1250，因为我之前看过的字体有这个数字，但它似乎并不重要，只要它对所有的提升和高度都是一样的。我认为x高度在我的例子中并不重要，因为所有图示符都设置为相等的高度。也许帽子的高度也没有必要，请发表评论

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

重要的是Base64编码设置。没有这一点，您就无法从另一个域加载字体，这是由于浏览器实现了SOP（同源策略）。更多信息请点击此处：

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

如果您觉得您可以帮助更好地理解这些指标，或者如果设置了任何错误/不必要的值，请添加评论



类型3.2中的字体度量设置


类型3.2中的高级字体度量设置


字形示例


您可以使用。它允许您使用现有字体的字形、从直观的web界面导入的SVG等创建自己的自定义字体。我自己使用它来创建图标字体以及特定于项目的图标字体

使用Icomoon应用程序，可以在矩形网格内镜像、旋转、调整或重新定位每个图示符。网格本身也可以调整大小。有关该界面的概述，请参见下面的屏幕截图

不幸的是，这似乎与字体标准的选择有着密切的联系（见编辑后的文章）。什么是“全艺术板高度”？这就是我在这里想要理解的。最后两个元素使用默认指标，突然出现