android/chrome web字體渲染問題 - 垂直/寬度裁剪

Question

所以即時通訊工作在一個新的網站上。我使用font squirrel創建了自定義字體（ttf）並從中生成了網頁字體。字體嵌入效果很好，在桌面上跨瀏覽器。它也適用於ios設備。但在Android設備上，我用於網站徽標的單個字符正在垂直裁剪。少於一半的字形正在顯示。它幾乎好像它是一個精確的正方形（標誌是長的水平）見下面的截圖...

我已確認在一個星系S3，Nexus 5的這種行爲，和Nexus 7使用無論是股票的Android瀏覽器或谷歌瀏覽器。如果您注意到，它下面還有3個其他圖標（圓圈），它們來自同一個webfont並呈現正常。該徽標實際上以較小的字體大小正確呈現。

我使用下面的CSS：

/* font styles */ 
@font-face { 
    font-family: 'lticons'; 
    src: url('fonts/lticons-webfont.eot?v=1.1.1'); 
    src: url('fonts/lticons-webfont.eot?#iefix&v=1.1.1') format('embedded-opentype'), 
     url('fonts/lticons-webfont.woff?v=1.1.1') format('woff'), 
     url('fonts/lticons-webfont.ttf?v=1.1.1') format('truetype'), 
     url('fonts/lticons-webfont.svg?v=1.1.1#lticons') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
.lt { 
    display: inline-block; 
    font-family: lticons; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.lt .logo:before { 
    content: "\f000"; 
} 
/* html styles */ 
.hero { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.hero .logo { 
    position:absolute; 
    display:block; 
    overflow:visible; 
    text-overflow:string; 
    font-size:20em; 
    color:#fff; 
    top:25%; 
    left:50%; 
    -webkit-transform:translate(-50%,-25%); 
    -moz-transform:translate(-50%,-25%); 
    -ms-transform:translate(-50%,-25%); 
    -o-transform:translate(-50%,-25%); 
    transform:translate(-50%,-25%); 
    text-shadow:rgba(0,0,0,.5) 1px 1px 1px 
} 

和下面的HTML渲染它：

<section class="home col-xs-12"> 
    <div class="hero"> 
    <i class="lt logo"></i> 
    <h1>Transaction intelligence &amp; customer<br/>insites for the mobile world</h1> 
    </div> 
</section> 

我已經嘗試瓦特/和W/O轉換代碼。這種黑客只涉及定位。它呈現相同。有什麼建議麼？謝謝。

Answer 1

我有這個完全相同的問題，但只有當我有巨大的圖標字體時纔會發生。如果您爲圖標字體添加背景顏色，您是否會看到背景顏色跨越圖標應該在的整個寬度？我所做的是更改字體類型的順序，以便svg版本在列表中位於eot版本之上。

Answer 2

我得到了與icomoon字體完全相同的問題。在鉻中渲染一些圖標。我真的花了很多時間，嘗試了我在網上找到的所有東西（包括改變字體CSS定義中svg和woff的順序），但沒有任何結果。

我注意到一個奇怪的行爲：我的圖標字體被裁剪，直到字體大小爲256px ...之後，渲染是好的。

我終於得到了icomoon支持的解決方案（5分鐘內！他們搖滾！）。在這裏，他們的回答如下：

「這是一個Chrome字體渲染錯誤，請在下載字體之前更改字體的正方形高度，您可以在字體選項卡>首選項>字體指標中找到此選項，將其更改爲1024.」

如果您使用其他字體應用程序，請檢查是否可以在下載它之前爲您修改此'Em Square Height'參數。

這解決了我的問題！