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 を 1 つを残してすべて削除してみました。Firefox では、OTF、WOFF、TTF、SVG がすべて同じように表示されました。

(注: このテストを抽出した元のformat('truetype')ファイルには、各フォント ファイルに などが含まれていましたformat('svg')が、そのフォントの表示が壊れていたため、すべてテストから除外しました。

4

1 に答える 1