13

@ font-faceを使用しようとしていますが、何らかの理由で機能しません（IE9、Chrome、Firefox）。フォントをロードするときに正しいディレクトリを指していることを確認しましたが、それでも機能しないようです。

これが私のコードです：

@font-face{
font-family: 'test';
src: url('../fonts/FontName.ttf'),
         url('../fonts/FontName.eot');
font-weight: normal;
font-style: normal;
}

そしてそれを呼び出す：

#header{
text-align:left;
padding: 10px;
font-family:test;
}

私は何が間違っているのですか？

4

5 に答える 5

15

Internet Explorer は、バージョン .eot を使用する代わりに、コードで使用されていないフォントのバージョン .woff を使用します。fontsquirrelの@font-face ジェネレータツールを使用して、さまざまなフォント バリエーションをすべて取得しました。

出力は次のようになります。

@font-face{
font-family: 'test';
src: url('../fonts/FontName.eot'),
     url('../fonts/FontName.eot?#iefix') format('embedded-opentype'),
     url('../fonts/FontName.woff') format('woff'),
     url('../fonts/FontName.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
于 2013-01-31T21:04:45.040 に答える
4

format()人々がさまざまな種類のフォント (および要素と一緒に 要素を使用すること) について言っていることに加えてurl()、css 継承をチェックして、何も設定されていない#headerか、その中の要素が に設定されていないことを確認することも価値がありますfont-weight: bold。通常の太さ/通常のスタイルのフォントのみを指定しているため、何かが太字になっている場合、フォントは表示されません。

于 2013-01-31T21:09:05.957 に答える
1

FontSquirrelジェネレーターを使用してフォントを実行すると、さまざまなブラウザーでサポートされているさまざまな形式にフォントが変換されます。

また、フォントファイルへのパスを調整するだけで、使用できるCSSのブロブが提供されるはずです。

http://www.fontsquirrel.com/fontface/generator

于 2013-01-31T15:42:36.943 に答える
0

これを試して：

@font-face{
font-family: 'test';
src: url('../fonts/Minecraft.ttf'),
         url('../fonts/minecraft.eot');
font-weight: normal;
font-style: normal;
}

あなたのコードには、フォントとフォントの2つのフォルダーがあります。私の例では、フォントを使用しました。

于 2013-01-31T15:36:36.927 に答える