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

所以即时通讯工作在一个新的网站上。我使用font squirrel创建了自定义字体（ttf）并从中生成了网页字体。字体嵌入效果很好，在桌面上跨浏览器。它也适用于ios设备。但在Android设备上，我用于网站徽标的单个字符正在垂直裁剪。少于一半的字形正在显示。它几乎好像它是一个精确的正方形（标志是长的水平）见下面的截图...android/chrome web字体渲染问题 - 垂直/宽度裁剪

enter image description here

我已确认在一个星系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转换代码。这种黑客只涉及定位。它呈现相同。有什么建议么？谢谢。

来源

2014-01-30 xero

如果不能引用字体就很难测试它。你可以在jsbin.com – Kinlan

我有这个完全相同的问题，但只有当我有巨大的图标字体时才会发生。如果您为图标字体添加背景颜色，您是否会看到背景颜色跨越图标应该在的整个宽度？我所做的是更改字体类型的顺序，以便svg版本在列表中位于eot版本之上。

来源

2014-03-07 11:15:49 user3128901

上复制该问题是的，它是一个更大的图标。我已经能够通过减小图标大小并增加使用图标的字体大小来“修复”它。看起来有点冒失，但正在解决这个问题。 – xero

我得到了与icomoon字体完全相同的问题。在铬中渲染一些图标。我真的花了很多时间，尝试了我在网上找到的所有东西（包括改变字体CSS定义中svg和woff的顺序），但没有任何结果。

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

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

“这是一个Chrome字体渲染错误，请在下载字体之前更改字体的正方形高度，您可以在字体选项卡>首选项>字体指标中找到此选项，将其更改为1024.”

如果您使用其他字体应用程序，请检查是否可以在下载它之前为您修改此'Em Square Height'参数。

这解决了我的问题！

来源

2015-03-08 21:40:29

IcoMoon现在实际上默认为那个1024的值......并且很遗憾没有为我工作。什么似乎工作是被接受的答案的建议改变对SVG喜好。 –

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

回答

相关问题