Question

我无法让@font-face在我测试的任何移动Webkit浏览器中运行 - 在iPhone 3GS上安装Safari，默认安卓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;
}

很高兴知道那里有一个比dang smileyface hack更好的防弹解决方案。

希望这有助于某人！

Answer 2

根据http://caniuse.com/woff，Android 2.3,4,4.1,4.2和4.3不支持woff字体。所以你必须添加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字体。

@ font-face无法在移动Webkit中使用

2 个答案: