14

我无法@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 中有一些字母间距规则吗？

谢谢！

4

2 回答 2

17

事实证明，语法是错误的。我通过 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;
}

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

希望这对某人有帮助！

于 2011-02-04T06:59:07.080 回答
0

根据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 字体。

于 2014-08-08T14:21:35.493 回答