CSS自定義字體垂直偏移（錯誤？）

Question

我使用自定義字體在我的CSS用這種方法：

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'); 
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
.gabriola { 
    font-size: 20px; 
    line-height: 20px; 
    height: 20px; 
    background: red; 
} 

<div class="gabriola">Some texty text here</div> 

每個瀏覽器呈現此字體由它自己的方式與垂直偏移頂部和底部是這樣

我在做什麼錯了？謝謝

Answer 1

這可能沒有任何你做錯了。這裏有一些可能適用的觀點，有些可以由你來控制，有些則不可以。

1. 可以肯定的是，明確設置了vertical-align: baseline。
2. 不同的文件（.eof,.woff,.ttf）本身可能沒有定義相同，因此不同的瀏覽器使用不同的文件並顯示差異。
3. 不知道如果有兩個src電話是搞亂的東西了，但你可以嘗試消除第二個：

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'), 
     url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

這些都只是猜測。你將不得不測試＃1，3.如果問題是＃2，我不確定是否有一個優雅的解決方案。

有，當然，在this site的告誡：

記住，字體渲染可以跨瀏覽器和 操作系統有很大的不同。許多開發人員已經從Windows和Internet Explorer遇到 這樣糟糕的結果，他們完全避免使用自定義字體 。請務必仔細檢查所有 瀏覽器的結果，以確定質量是否可接受。

更新

This post提供有關可能解決顯示問題的一些技巧。這是字體松鼠，他特別指出：

如果你下載的包，你可以嘗試用 發電機再生的字體。我們對發生器進行定期調整， 可能會改善字體的提示或渲染。

但他也證實，

不推卸責任，但最常見的原因是一個糟糕的原始 字體。

這與我的觀點＃2。

Answer 2

我有同樣的問題，並且解決方案是用原始屬性重建字體而不改變任何與Hight邏輯字體創建器的新文件，字體不變並等於原始問題被糾正和對齊在包括ie6在內的所有瀏覽器中都達到完美，這是幾個小時的工作，但這是您需要某個用戶的結果。

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 3

我知道這已5年的OP問的問題，但我發現這個偉大的技術，在獲取文本基線對齊正確。

基本上，文本容器必須是行高爲0的行內塊; 然後，創建一個inline-block的僞元素，並將其高度按照你想要的行高：

span { 
 
    font-size: 2em; 
 
    background: red; 
 
} 
 
span.baseline-align { 
 
    vertical-align: baseline; 
 
} 
 

 
span.true-baseline-align { 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 
span.true-baseline-align::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 1em; // this is where you control line-height 
 
}

<span>Normal text</span> 
 
<br><br> 
 
<span class="baseline-align">With vertical-align: baseline</span> 
 
<br><br> 
 
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/