Question

在 Android 手机上的 Chrome 浏览器中，@font-face未在http://dev.belugalab.com/btm正确呈现徽标下的3个字词。但是，相同的字体似乎在页脚中工作。我不确定这是否与 font-face 相关，但这是我最好的猜测。这是 Android Chrome 上发生的事情的屏幕截图：http://imm.io/MgE0

CSS：

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

h2 {
    font-family:'intro_regular';
    font-size:31px;
    font-weight:400;
    color:#fff;
    background:#000;
    display:inline-block;
    height:30px;
    margin:3px 0 4px 39px;
    line-height:30px;
    padding:0 4px
}

Answer 1

它在Chrome for iOS上正确呈现。我没有Android设备可以看到它，但请尝试使H2线高和高度与字体大小相同或更高。它们目前比您的字体大1个像素。

Answer 2

我没有Android手机，但从屏幕截图来看，看起来h2甚至没有相同的字体。在Chrome（Mac）中打开页面并取消选中“font-family”（在开发人员工具中）时，它看起来更接近屏幕截图。当我删除line-height标记并稍微增加文字大小时，它看起来就像Android屏幕截图一样。

我会尝试删除height和line-height并调整padding以更接近您想要的内容。这至少可以防止文本被切断。

我怀疑'intro_regular'字体有问题。也许Android Chrome使用的是与桌面不同的字体格式？ SVG也许？

我的第一个怀疑是另一个CSS规则在Android上覆盖了另一个而不是桌面。但我找不到任何其他可以做到这一点的规则。

您是否尝试过清除Android Chrome上的缓存？

@ font-face无法在Android上的Chrome中呈现

2 个答案: