1

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

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
}
4

2 回答 2

0

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

我会尝试删除heightandline-height并调整padding以更接近你想要的。这至少可以防止文本被截断。

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

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

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

于 2012-11-20T04:43:16.770 回答
0

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

于 2012-11-20T03:56:08.857 回答