Question

<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;
}

字体样式发生了变化（很棒！），但它几乎从红色的1px实心矩形中跳出来。为什么？怎么修？为什么会这样？那只是字体。没有填充，没有使用边距。

Firefox可以，但Chrome是个问题。

Answer 1

字体文件一定有问题。我会使用Font Squirrel's字体生成器来构建要与@ font-face一起使用的字体文件。它将生成跨浏览器的CSS供您使用，它可以在不同的浏览器中更好地工作。

@ font-face：Chrome完全检测字体，但会出现边距

1 个答案: