2

次の CSS を使用して、Web ページでカスタム フォントを定義しています。

@font-face
{
    font-family:zapfino;
    src:url("zapfino.ttf");
}

次に、それを使用する ID を定義しています。

#custom_font
{
    font-family:zapfino;
    font-size:18px;
}

このページを Safari と Chrome でテストしたところ、問題なく動作しました。ただし、Firefox ではフォントが表示されず、デフォルトに戻っています。これが再投稿である場合は申し訳ありませんが、StackOverflow で検索しましたが、答えが見つかりません! なぜこれが起こっているのか誰にも分かりますか？ここでそれを参照してください: www.moosecodes.com (まだ作成中です!ご容赦ください!)

4

3 に答える 3

4

各ブラウザは、Web フォントの 1 つのファイル タイプのみを読み取ります。残念ながら、それらはすべて異なるファイル形式です。すべてのブラウザでフォントを正しく表示するには、TTF、WOFF、SVG、EOT の 4 種類のフォント ファイルが必要です。コードは次のようになります。

@font-face {
font-family: 'Zapfino';
    src: url('Zapfino.eot');
    src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
         url('Zapfino.woff') format('woff'),
         url('Zapfino.ttf') format('truetype'),
         url('Zapfino.svg#SansumiRegular') format('svg');
}

このコードは、FontSquirellフォントに含まれるスタイルシートに基づいています。

FontSquirell にはコンバーターがありますが、ライセンスを確認する必要があります。Zapfino は Adob​​e(?) が所有する商用フォントであり、私の知る限り、@font-face でフォントを使用することは、フォントの EULA に違反しています。

TypeKitは、ファウンドリの EULA に準拠した料金で、@font-face で使用する商用フォントを提供しています。

于 2012-03-29T16:59:48.743 に答える
3

jlegoは正しいです-FontSquirrelサイトをチェックする必要があります-キットを構築してファイルを変換するための優れたツールがあり、フォントがサイトで合法的に使用できることを常に確認する必要があります。

ただし、FirefoxとChromeはどちらも、使用している形式であるTTFをサポートしている必要があります。

あなたのサイトであなたの問題を調査したところ、チェックインしたブラウザでフォントが正しくレンダリングされていないことがわかりました。スタイルシートが正しいファイルの場所を参照しているときに、フォントファイルが次のように表示されます。破損している。使用しているフォントファイルを新しいフォントファイルに置き換えることをお勧めします。

于 2012-03-29T17:07:19.643 に答える
0

私も同じ問題を抱えていました。jlegoの答えは私にとって役に立ちました。私のフォントはChromeとIEで認識されました。FFでは、cssファイルにformat（'truetype'）を追加するまで、TTFが認識されませんでした。

于 2012-10-09T22:07:45.330 に答える