6

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

まず、ここに問題を理解するための画像があります

編集：残念ながら、新しいユーザーとして画像を投稿できないため、ここに説明があります：

問題は、フォントのベースラインとその下の要素の間の距離です。私のubuntuマシンには、パディング/マージンではないという説明のつかないギャップがあります。テキストを選択しても、ずれているように見えます。

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

フォントをインポートするための css は次のとおりです。

@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');  
}

woff 宣言を削除し、ttf がフォントを提供していても、問題は解決しませんでした。

私はこれで本当に迷っています。どうすれば同じにすることができるのかわかりません。

4

4 に答える 4

10

フォントには、3 セットの垂直メトリック情報が埋め込まれています。1 セットは Mac 用、1 セットは PC 用、もう 1 セットは通常 *nix で使用されます。これらは同期が難しい場合がありますが、Font-face Generator はこれらの値を同じにしようとします。試してみる？

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

Google タイプ チームからの詳細情報:

http://code.google.com/p/googlefontdirectory/wiki/VerticalMetrics推奨事項

于 2012-04-06T18:06:46.870 に答える
4

このフォントでも同じ問題がありました: http://www.fontsquirrel.com/fonts/Symbol-Signs

事前にパッケージ化された @font-face キットをダウンロードしましたが、Mac と PC の間でメトリックが一致しませんでした。

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

于 2012-04-19T23:14:59.500 に答える
0

line-height css プロパティに固定値 (px など) を設定します。

于 2012-09-26T05:42:01.927 に答える