html - font-face がライブで機能しない

Question

@font-face を使用して、Web ページにいくつかのフォントを使用しようとしました。ローカルホストにある場合、font-face は正常に動作します。どのブラウザーでも機能しないフォントフェイスをライブに移動しようとすると。これが私のコードです：

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

私がこれを気に入ると、ローカルホストでは正常に機能しますが、ライブでは機能しません。

注: フォントは fonts フォルダーにあり、css は css フォルダーにあります。

score 2 · Accepted Answer

多分これが役立つかもしれません: Font-Face Not loaded

IIS のサーバーでフォントタイプを許可することに関係している可能性があります。

また、Firefox には、フォントファイルを CSS ファイルと同じフォルダに配置する必要があるというバグがあると思います。

score 0 · Accepted Answer

これが当てはまるかどうかはわかりませんが、IEは.eot（Embedded OpenType）フォントのみをサポートし、ホストしているフォントはInternetExplorerでは機能しないことに注意してください。これが問題かどうかはわかりませんが、コードに問題がある可能性があります。

これを修正する方法は、フォントコンバーターを使用することです。私が過去に使用したものはhttp://www.fontsquirrel.com/tools/webfont-generatorです。次に、CSSファイル内でEOTフォントとTTFフォントの両方を呼び出します。以下に例を示します。

@font-face {
    font-family: Acme;
    src: url('fonts/eot/Acme-Regular.eot'),
         url('fonts/ttf/Acme-Regular.ttf');
}

これが問題ではない場合、私はあなたのコードを調べましたが、CSSで実際に@ font-faceコマンドを呼び出したライブサイトを見つけることができません。上記のコメントに従って、試してみると500エラーが発生します。サーバー上のフォントにアクセスします。

もう1つのオプションは、GoogleのサーバーでホストされているGoogle Web Fonts Libraryを使用することです。これは、コードhttp://www.google.com/webfontsからリモートで呼び出すことができます。

score 0 · Accepted Answer

フォントの著作権と関係があると思います。

私は同じ問題を抱えていました.font squirrelで別の同様のフォントを見つけてダウンロードし、font squirrelで再度変換してから、css font-face宣言の方法を使用すると、ローカルホストと私のライブWebサイトで正常に動作します.

私も使うsrc: url('../fonts/

3 に答える 3