Firefox将字体基线置于行高的中心（字体：Knockout 46 Flyweight）

Question

我猜测Firefox在所有情况下都将此字体的高度读为0，因此其基线始终位于行高的中心。这似乎是这个特定字体的问题，但是从源OTF重建WOFF，TTF和SVG并不能解决问题。任何人都可以指出更具体的原因/解决方案吗？

LEFT：Mac 10.8.3，Chrome 27.0.1453.110;右：Mac 10.8.3，Firefox 21.0

CSS

@font-face {
    font-family: 'HTF46';
    src: url(KnockoutHTF46Flyweight.eot),
         url(KnockoutHTF46Flyweight.otf),
         url(KnockoutHTF46Flyweight.woff),
         url(KnockoutHTF46Flyweight.ttf),
         url(KnockoutHTF46Flyweight.svg);
    font-weight: normal;
    font-style: normal;
}
div {
    font-size: 30px;
    height: 24px;
    border: 1px solid #09F;
    outline: 1px dashed #F00;
    line-height: 24px;
    font-family: "HTF46";
    text-transform: uppercase;
}

HTML

The border of the box is in blue.
<div>This is some text</div>
The outline of the box is in dashed red, and emphasizes the font displacement.

我还尝试删除font-face { src: }声明中除了一个URL之外的所有URL，以测试每个字体文件。 Firefox同时显示了OTF，WOFF，TTF和SVG。

（注意：我为每个字体文件提取此测试的原始文件包括format('truetype')等，但是format('svg')打破了该字体的显示，所以我把它们全部关闭了测试。

Answer 1

我有一个类似的问题，事实证明，我的文件的字体在某种程度上已损坏。我在这里上传了一个文件：http://www.fontsquirrel.com/tools/webfont-generator，它生成各种格式的字体文件并替换了字体文件。这为我解决了这个问题。

也可能类似于这个问题：@font-face problem, Firefox adds padding, Chrome does not