2

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

左：Mac 10.8.3，Chrome 27.0.1453.110； 右：Mac 10.8.3、Firefox 21.0 左：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')破坏了该字体的显示，因此我将它们全部排除在测试之外。

4

1 回答 1

0

我有一个类似的问题，结果是我的字体文件以某种方式损坏了。我在这里上传了一个文件：http: //www.fontsquirrel.com/tools/webfont-generator生成各种格式的字体文件并替换字体文件。那为我修好了。

也可能类似于这个问题：@font-face 问题，Firefox 添加填充，Chrome 没有

于 2014-04-29T15:43:52.287 回答