0 
<style>
    @font-face
    {
        font-family : 'Avenir';
        src         : url("/fonts/Avenir999.otf");
    }

    p.price a span
    {
    /*font-family   : 'Avenir';*/
      font-size     : 45px;
      color: #889900;
    }

</style>
<p class="price" style="border:1px solid red;">
        <a href="#"><span>this text is above the middle of red rectangle if uncomment //font-family</span></a>
</p>

繰り返しますが、フォントは正しく検出されます。すべて正常に動作します。私が使用する場合

p.price a span
{
  font-size     : 45px;
  color: #889900;
}

それなら完璧です。しかし、文字列 font-face を追加すると、

p.price a span
{
  font-family   : 'Avenir';
  font-size     : 45px;
  color: #889900;
}

フォント スタイルが変更されますが (すばらしい!)、赤い 1 ピクセルの塗りつぶされた長方形からほとんど飛び出します。なんで？直し方？なぜそれが起こるのですか？それはただのフォントです。パディングなし、マージンなし。

Firefox は問題ありませんが、Chrome は問題です。

4

1 に答える 1

1

フォントファイルに問題があるはずです。Font Squirrel のフォント ジェネレーターを使用して、@font-face で使用するフォント ファイルを作成します。これにより、さまざまなブラウザー間でより適切に機能するクロスブラウザー CSS が生成されます。

于 2012-08-28T19:44:16.610 に答える