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

那麼它是完美的。 但是，一旦我添加一個字符串字體面，使

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

的字體樣式的變化（太棒了！），但它跳起來幾乎退出了紅色1px的固體矩形。爲什麼？怎麼修？爲什麼會發生？這只是字體。沒有填充，沒有使用邊距。

Firefox是好的，但鉻是一個問題。

Answer 1

它必須是你的字體文件有問題。我會使用Font Squirrel's字體生成器來構建您的字體文件以與@ font-face一起使用。它會生成跨瀏覽器的CSS，以便在不同的瀏覽器中更好地使用它。