css @ font-face不會在所有瀏覽器中垂直對齊文本

我必須瀏覽谷歌的每一頁，但還沒有找到解決方案。我有一個自定義字體，我通過css font-face使用。根據我使用的瀏覽器和操作系統，字體會在底部添加額外的填充。下面的圖片顯示了一個例子，mac在左邊，窗戶在右邊。它看起來是正確的（在Windows中），我希望它在Mac上是相同的。css @ font-face不會在所有瀏覽器中垂直對齊文本

different browser view

@font-face 
{ 
    font-family: universLight; 
    src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf'); 
    font-weight: normal; 
    font-style: normal; 
} 
#button{ 
    font-family: universLight; 
    border: 1px solid black; 
    background: #ccc; 
}

的代碼位於http://jsfiddle.net/ZDh5h/

以下是我已經知道會不會從我的研究工作。

line-height將填充添加到頂部和底部，以便底部的額外填充保留。
使用不同的擴展名如.otf或.ttf也不起作用。只要產生相同的結果
改變字體大小也並沒有真正做任何事情

我很多通過使用這種字體出來的網站，並沒有真正想爲Mac添加不同的CSS VS張視窗。如果有人知道無論如何解決這個問題，而沒有JavaScript添加額外的填充，我將非常感激。

謝謝。

來源

2013-05-09 Avovk

參見http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

正常

告訴用戶代理所使用的值設置爲基於所述元素的字體「合理的」值。該值具有與相同的含義。我們建議在1.0到1.2之間使用「正常」值。計算出的值是'normal'。

我想你觀察它的動作來自不同的「合理」值，不同的瀏覽器爲normal是默認line-height值。

因此，請指定您的值（如line-height: 1.5em;）以擺脫差異。

來源

2013-05-10 08:12:17 MatTheCat

css @ font-face不會在所有瀏覽器中垂直對齊文本

回答

相關問題