@font-face 无法在移动 Webkit 中工作

Question

我无法让 @font-face 在我测试过的任何移动 Webkit 浏览器中正常运行 - iPhone 3GS 上的 Safari、默认的 Android 2.2 浏览器和 Android 上的 Dolphin 浏览器。

它适用于所有桌面浏览器，从 IE7 到 IE9、FF3.5、Safari 4 和 Opera。

字体和CSS来自FontSquirrel：

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: local('☺'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

我检查了SVG字体源中的SVG ID，它们都匹配。

难道是因为我稍后在 CSS 中设置了一些字母间距规则？

谢谢！

Answer 1

事实证明，语法是错误的。我通过 Twitter 偶然发现了这个解决方案：

http://www.fontspring.com/blog/the-new-bulletproof- font-face-syntax

它工作得很好。刚刚检查了所有主要浏览器，我的字体都出现了，包括 Android 和 iOS 上的。

现在，我的 CSS 是这样写的：

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot#') format('eot'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

很高兴知道有比笑脸黑客更好的防弹解决方案。

希望这对某人有帮助！

Answer 2

根据 http://caniuse.com/woff，Android 2.3、4、4.1、4.2 和 4.3 不支持沃夫字体。所以你还必须添加 ttf。我正在 Android 4.1 和 4.2 上进行测试，woff 似乎没问题！但在 4.0.3 上，我必须添加 tff 字体。

请参阅此链接 http://sanchez .org.ph/use-host-and-download-google-fonts-on-your-own-website/ 查看如何从 Google 下载 ttf 字体。