html - ブラウザに正しいフォントが表示されない

Question

CSS ファイルに次のコードがありますが、ブラウザにフォントが表示されません。

@font-face {
    font-family: 'font';
    src: url("fonts/FS_Metal.ttf");
}

.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'font';
}

Answer 1

これはクロスブラウザである必要があります

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

.menu_head {font-family:'your_font',serif;}

私はhttp://convertfonts.com/を使用しています...それはあなたのためにすべての仕事をします

フォントファイルへのパスが正しいかどうかも確認してください

Answer 2

これは、src: url("fonts/FS_Metal.ttf");この行によるものです。相対パスが正しいことを確認する必要があります。または、絶対パスを使用することもできます。

ディレクトリ構造が次のようになっているとします。

ディレクトリ構造:

index.html
css/
js/
fonts/

相対パスを使用して、css ファイルで次の操作を行います。

@font-face {
    font-family: 'font';
    src: url("../fonts/FS_Metal.ttf");
}

絶対パスを使用してこれを行う

@font-face {
    font-family: 'font';
    src: url("http://yoursite.com/fonts/FS_Metal.ttf");
}

Google Webfonts APIもご覧になることをお勧めします