Firefox はこのフォントの高さを常に 0 として読み取っているため、ベースラインは常に行の高さの中央にあると思います。これはこの特定のフォントの問題のようですが、ソース OTF から WOFF、TTF、および SVG を再構築しても問題は解決しません。誰かがより具体的な原因/解決策を指摘できますか?
左: 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')
が、そのフォントの表示が壊れていたため、すべてテストから除外しました。