0

カスタムフォント面がFFに適用されていません。これはCoda（私の開発アプリ）で機能します。そしてSafariでも...

CSS：

@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.ttf');
}
/* IE9+ */
@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.eot');
    }
    #tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}

HTML：

<div id="tagCommon"></div>

サイトはhttp://tntplants.site11.com/です。右側の上部のボックスに文字を入力すると、左側のgiddyupスクリプトフォントになります。

4

4 に答える 4

2

すべての主要なブラウザは、サポートすることを選択したフォント形式を独自の方法で使用することを決定しました。

  • InternetExplorerはEOTのみをサポートします
  • MozillaブラウザはOTFとTTFをサポートしています
  • SafariとOperaはOTF、TTF、SVGをサポートしています
  • ChromeはTTFとSVGをサポートしています。

したがって、完全かつ適切なサポートを得るには、顔を宣言するときに特定の構造に従う必要があります。

CSSFONT-FACE例

@font-face {
    font-family: 'GiddyupWebRegular';
    src: url('giddyup-webfont.eot');
    src: url('giddyup-webfont.eot?#iefix') format('embedded-opentype'),
         url('giddyup-webfont.woff') format('woff'),
         url('giddyup-webfont.ttf') format('truetype'),
         url('giddyup-webfont.svg#GiddyupWebRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

ここで実際の例を参照してください！

生成されたCSSとフォントおよびCSSをここからダウンロードしてください！

上記のリンクは、font-faceコードジェネレーターを使用して生成されました。フォントをアップロードすると、コードがポップアップ表示されます。

フォントリス

詳細については、MDNのこの記事をお読みください。

于 2012-05-23T20:56:53.343 に答える
1

CSS宣言を入れ替えます-TTF宣言をEOT宣言の後に置きます。例えば

/* IE9+ */
@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.eot');

@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.ttf');
}
    }
    #tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}
于 2012-05-23T20:51:18.340 に答える
0

私が最初にすることは、フォントスタックをFontSquirrelから1つに切り替えることです。

@font-face {
    font-family: 'Name';
    src: url('Name.eot');
    src: url('Name.eot?#iefix') format('embedded-opentype'),
        url('Namet.woff') format('woff'),
        url('Name.ttf') format('truetype'),
        url('Name.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;
}
于 2012-05-23T20:54:58.847 に答える
0

MyScriptFontと同じではありません'MyScriptFont'。

font-family宣言をに変更#tagCommonするMyScriptFontか、に変更@font-faceし'MyScriptFont'ます。

@font-face {
  font-family: 'MyScriptFont';
  src: url('fonts/giddyup.ttf');
}
/* IE9+ */
@font-face {
  font-family: 'MyScriptFont';
  src: url('fonts/giddyup.eot');
}
#tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}
于 2012-05-23T20:56:30.127 に答える