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

【问题标题】：@font-face not rendering in Chrome on Android@font-face 无法在 Android 上的 Chrome 中呈现
【发布时间】：2012-11-08 00:57:35
【问题描述】：

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

【问题讨论】：

标签： android google-chrome css font-face

【解决方案1】：

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

【讨论】：

顺便说一句，“Chrome for iOS”不是 Chrome。它是一个包装好的 UIWebView，一个残缺的 Safari。苹果的错，不是谷歌的错。

【解决方案2】：

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

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

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

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

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

【讨论】：