OSの異なる垂直メトリックを持つカスタムフォント

Question

私が作成しているページのカスタムフォントを含めることを試みています。私の問題は、私のubuntu開発マシンとWindows PC上で、フォントの垂直方向の配置が異なっていることです。

まず、ここで問題に

編集を理解するための画像です：

問題のフォントとの距離がされています。残念ながら私はここで、画像を投稿することができない新しいユーザーとしての記述がありますベースラインとその下の要素。私のubuntuマシンには、パディング/マージンではないという説明できない隙間があります。テキストを選択しても、整列していないように見えます。

どちらもChromeでテストされていますが、同じhtml/cssの裏にはもちろん同じページがあります。コードとクロムのインスペクタツールの両方に下部マージン/パディングなし。同じ行の高さ。フォントはMuseoです。どちらもフォントの.woffバージョンをロードします。その他の情報は、私が提供してくれれば幸いです。

フォントをインポートするためのCSSは次のとおりです。私はWOFF宣言を取り除き、TTFフォントを提供していたとき

@font-face { 
    font-family: 'Museo-700'; 
    src: url('path-to-eot'); 
    src: url('path-to-eot?') format('embedded-opentype'), 
     url('path-to-woff') format('woff'), 
     url('path-to-ttf') format('truetype'); 
} 

問題も持続しました。

私は本当にこれで失われています、私は同じようにすることができないのか考えません。どんな種類の助けでも大歓迎です！

Answer 1

フォントには、3組の埋め込まれた垂直メトリック情報があります。 Mac用に1セット、PC用に1セット、* nixで通常使用されるもう1セット。これらは同期するのが難しいかもしれませんが、フォントフェイスジェネレータはこれらの値を同じにしようとします。試してみる？ Googleのタイプのチームから

http://www.fontsquirrel.com/fontface/generator

さらに詳しい情報：私はパッケージ化されたする@ font-faceキットをダウンロードし http://www.fontsquirrel.com/fonts/Symbol-Signs

：

http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

Answer 2

私はこのフォントと同じ問題を抱えていましたメトリックはMacとPCで一貫性がありませんでした。

解決策は、ダウンロードされたキットからTTFフォントを取り出し、それを使ってFont Squirrelのジェネレータで新しい@フォントフェイスキットをエクスポートすることでした。ジェネレータには、エキスパート設定の[修正垂直メトリック]というチェックボックスがあります。キットを生成する前にこれがチェックされていることを確認してください。

Answer 3

ラインハイト CSSプロパティの固定値をpxなどに設定します。