android / chrome web字体渲染问题 - 垂直/宽度裁剪

Question

所以我正在开发一个新网站。我使用font squirrel创建了一个自定义字体（ttf）并从中生成了webfonts。字体嵌入效果很好，桌面上有跨浏览器。它也适用于ios设备。但在Android设备上，我用于网站徽标的单个字符正在垂直裁剪。不到一半的字形显示。它几乎看起来像是一个精确的正方形（徽标长而水平）见下面的截图...

我已经使用股票Android浏览器或谷歌浏览器确认了在galaxy s3，nexus 5和nexus 7上的这种行为。如果你注意到，它下面还有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 /和变换代码。黑客只涉及定位。它渲染相同。有什么建议？感谢。

Answer 1

我有同样的问题，但只有当我有巨大的图标字体时才会出现这种情况。如果您为图标字体添加背景颜色，您是否看到背景颜色跨越图标所在的整个宽度？我所做的是更改字体类型的顺序，以便svg版本在列表中的第一个，在eot版本之上。

Answer 2

我遇到了与icomoon字体完全相同的问题。在chrome中渲染裁剪了一些图标。我真的花了很多时间在这上面，尝试了我在网上找到的所有内容（包括在字体 - 面部CSS定义中更改svg和woff的顺序），但没有任何结果。

我注意到一个奇怪的行为：我的图标字体只被裁剪，直到字体大小为256px ......之后，渲染就可以了。

我终于得到了icomoon支持的解决方案（5分钟内！他们摇滚！）。他们在这里回答：

＆＃34;这是Chrome字体呈现错误。在下载前尝试更改字体的Em Square Height。您可以在字体标签＆gt;中找到此选项。偏好＆gt;字体指标。将其更改为1024。＆＃34;

如果您使用其他字体应用，请检查您是否可以修改此消息＆＃39; Em Square Height＆＃39;下载之前的字体参数。

这解决了我的问题！