安卓/ Chrome网上应用字体渲染问题 - 垂直/宽裁剪 [英] android / chrome web font rendering issue - vertical/width cropping

问题描述

等了一个新网站工作的IM。我创建了一个自定义的字体（TTF），并使用产生从中网络字体字体松鼠。字体嵌入在桌面上的伟大工程，跨浏览器。它也适用于iOS设备的罚款。但在Android设备上我使用该网站的标识单个字符是垂直裁剪。正在显示只有不到一半的字形。它看起来几乎就像是一个确切的平方（标志是一个长水平）见下面的截图...

so im working on a new website. i have created a custom font (ttf) and generated webfonts from it using font squirrel. the font embedding works great, cross-browser on the desktop. it also works fine on ios devices. but on android devices the single character i use for the site's logo is being cropped vertically. less than half the glyph is being displayed. it almost seems like it's an exact square (the logo is long an horizontal) see screenshot below...

我可以选择使用普通的Andr​​oid浏览器或谷歌浏览器证实了星系S3，Nexus 5的这种行为，和Nexus 7。如果您发现有它下面3其它图标（圈子），他们是来自同一个webfont和渲染罚款。标志实际上是在一个较小的字体大小正确呈现。

i have confirmed this behavior on a galaxy s3, nexus 5, and nexus 7 using either the stock android browser or google chrome. if you notice, there are 3 other icons below it (the circles) they are from the same webfont and render fine. the logo actually renders correctly at a smaller font sizes.

我用下面的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渲染它：

and the following html renders it:

<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转换code。该黑客只处理定位。它呈现相同的。有什么建议么？谢谢。

i have tried w/ and w/o the transform code. that hack only deals with positioning. it renders the same. any suggestions? thanks.

推荐答案

我有这个相同的问题，但似乎只发生时，我有巨大的图标字体。如果添加了背景颜色的图标字体，你再看看那个背景颜色跨越您的图标应该是全宽？我所做的就是改变字体类型，以便SVG版本是首先在列表中，上方的EOT版本的顺序。

I had this exact same issue, but only seemed to occur when I had huge icon fonts. If you add a background colour to the icon font do you then see that background colour span the full width of where your icon should be? What I did was to change the order of the font type so that the svg version was first in the list, above the eot version.

这篇关于安卓/ Chrome网上应用字体渲染问题 - 垂直/宽裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！