6

この方法で、CSS でカスタム フォントを使用します。

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot');
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.gabriola {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  background: red;
}

<div class="gabriola">Some texty text here</div>

各ブラウザは、このフォントを独自の方法でレンダリングし、このように上下に垂直にオフセットします フォントのレンダリング

私は何を間違っていますか？ありがとう

4

4 に答える 4

5

あなたが間違っていることは何もない可能性があります。適用される可能性のあるポイント、制御可能なもの、制御できないものがあります。

  1. 念のため、明示的に設定してvertical-align: baselineください。
  2. 異なるファイル ( .eof、.woff、.ttf) 自体が同じように定義されていない可能性があるため、異なるブラウザは異なるファイルを使用し、違いを表示しています。
  3. 2 つのsrc呼び出しが問題を引き起こしているかどうかはわかりませんが、2 つ目の呼び出しを削除してみてください。
@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot'),
         url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

これらはすべて単なる推測です。＃1、3をテストする必要があります。問題が＃2の場合、エレガントな解決策があるかどうかわかりません。

もちろん、このサイトには注意事項があります。

フォントのレンダリングは、ブラウザやオペレーティング システムによって大きく異なる可能性があることに注意してください。多くの開発者は、Windows と Internet Explorer で非常に悪い結果を経験しており、カスタム フォントの使用をまったく避けています。品質が許容できるかどうかを判断できるすべてのブラウザーで、常に結果を綿密に調べてください。

アップデート

この投稿では、レンダリングの問題を解決するためのヒントをいくつか紹介します。これは Font Squirrel のためのもので、彼は具体的に次のように述べています。

キットをダウンロードした場合は、ジェネレーターでフォントを再生成してみてください。フォントのヒンティングまたはレンダリングを改善する可能性のあるジェネレーターを定期的に調整します。

しかし、彼は次のことも確認しています。

見逃すわけにはいきませんが、最も一般的な原因は元のフォントが悪いことです。

これは私のポイント＃2と一致します。

于 2012-05-26T13:24:06.407 に答える
3

私は同じ問題を抱えていましたが、解決策は、Hightロジックフォントクリエーターを使用して新しいファイルで何も変更せずに元のプロパティでフォントを再構築することでした。フォントは変更されず、元の問題と同じように修正され、完全に調整されます。 ie6を含むすべてのブラウザは数時間の作業でしたが、これはユーザーが必要な場合の結果です。

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

于 2012-06-01T14:36:44.757 に答える