@字体面不工作在移动的Webkit

问题描述

我遇到了麻烦 @字体面表现在任何移动WebKit浏览器我测试 - Safari浏览器在iPhone 3GS，默认的Andr​​oid 2.2的浏览器在Android上，和海豚浏览器。

I'm having trouble getting @font-face to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android.

它可以在所有的桌面浏览器，从IE7到IE9，FF3.5的Safari 4和Opera。

It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and Opera.

字体和CSS都来自FontSquirrel：

The fonts and CSS are from 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，他们都匹配了。

I've checked the SVG ID in the SVG font source, and they all match up.

难道是因为我在CSS有一些字母间距规则以后？

Could it be because I've got some letter-spacing rules later on in the CSS?

谢谢！

推荐答案

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

As it turns out, the syntax was wrong. I stumbled across this solution via twitter:

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

它的工作完美。只是检查了所有主要浏览器，我的字体显示出来，包括Android和iOS。

It worked perfectly. Just checked in all major browsers, and my fonts show up, including on Android and iOS.

现在，我的CSS读起来就像这样：

Now, my CSS reads like so:

@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;
}

很高兴知道有一个更好的防弹解决方案，在那里比宕smileyface黑客。

Glad to know there's a better bulletproof solution out there than the dang smileyface hack.

希望这可以帮助别人！

这篇关于@字体面不工作在移动的Webkit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！