web-dev-qa-db-ja.com

@ font-faceがフォントをロードしていません

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

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

htmlcssfont-face
11
GoodPie

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

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

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

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

また、フォントファイルへのパスを調整するだけで、使用できるCSSのblobが得られるはずです。

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

1
Steph

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

1
Peter Elliott

これを試して：

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

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

0
Alessandro Minoccheri