1. ホーム
  2. css

[解決済み】@font-faceが機能しない。

2022-01-21 16:03:38

質問

なぜかフォントが表示されないのですが、どうしたらいいですか?

CSS(cssフォルダ内)。 style.css。

@font-face { 
 font-family: Gotham;
 src: url(../fonts/gothammedium.eot);
 src: local('Gotham-Medium'),
 url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
 font-family:Gotham,Verdana,Arial; 
}

解決方法は?

ダブルピリオド(...)は、1つ上のフォルダに移動し、スラッシュの後ろにあるフォルダを探すことを意味します。 例えば

index.html がフォルダの中にある場合 html/files にあり、フォントは html/fonts に行くには1つ前のフォルダに戻らなければならないので)。 /fonts ). あなたのindex.htmlは html で、フォントは html/fonts であれば、ピリオドは1つだけにしてください。

もう一つの問題は、お使いのブラウザが.eotフォントファイルに対応していない可能性があることです。

あなたのコードをもっと見ないと(そして多分あなたのウェブサイトのライブバージョンへのリンク)、私は本当にあなたを助けることができない。

編集: .eotの部分は忘れてください。あなたのcssの中の.ttfファイルを見逃していました。

以下を試してみてください。

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}