14

私がテストしたどのモバイル Webkit ブラウザでも動作に問題が@font-faceあります。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 フォントを追加する必要がありました。

Google から ttf フォントをダウンロードする方法については、このリンクhttp://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/を参照してください。

于 2014-08-08T14:21:35.493 に答える