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

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 的字体生成器来构建您的字体文件以与 @font-face 一起使用。它将生成跨浏览器的 CSS 供您使用，它应该在不同的浏览器中更好地工作。