@ font-faceがchromeで動作しない

Question

Google Chromeの最新バージョンを使用していますが、フォントフェースはまったく表示されません。

私はDebian Linuxを使用しています。Chromiumを含む他のすべてのブラウザでは、フォントが正しく表示されています。私が使用している

フォントフェイス宣言がある：あなたがそれらを得たところ、私はすべての書き込みを示唆から

@font-face { 
    font-family: Dejaweb; 
    src: url('DejaWeb.ttf'); 
} 

@font-face { 
    font-weight: bold; 
    font-family: Dejaweb; 
    src: url('DejaWeb-Bold.ttf'); 
} 

Answer 1

フォントが他の異なるフォーマットで提供されていた場合にも、この

src:url('DejaWeb-Bold.ttf') format('truetype'), 

をお試しくださいブラウザを次のように互換性があります。

@font-face { 
    font-family: "Dejaweb"; 
    src: url("DejaWeb-Bol.eot") format('embedded-opentype'), /* EDIT correction on this line */ 
    url('DejaWeb-Bol.woff') format('woff'), 
    url('DejaWeb-Bol.ttf') format('truetype'), 
    url('DejaWeb-Bolsvg#') format('svg'); 
    font-weight:bold; 
    font-style:normal; 
    } 

Answer 2

あなたのフォントファイルをフォルダの名前の「フォント」と「スタイル」という名前のフォルダにあなたのCSSファイルは、その後、私はちょうどこのように同じ間違いを修正し、この

@font-face { 
font-weight: bold; 
font-family: Dejaweb; 
src: url('../fonts/DejaWeb-Bold.ttf'); } 

のようなURLを記述する必要があります。

Answer 3

@ font-faceがわかりにくいブラウザで私にとってうまく動作しないときはいつも、これを私の.htaccessファイルにドロップします。おそらく、一部のブラウザでは他のドメインにホストされているフォントは読み込まれないため、このコードでトラブルシューティングを行うこともありますが、同じドメインでホストされているフォントを強制的に読み込ませる唯一の措置でもあります。一般的にはChromeに比べてFirefoxの方が問題ですが、Firefoxがうまく動作している間にChromeでフォントを強制するためにこれを使用しました。 Go figure。

<FilesMatch "\.(ttf|otf|eot)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch> 

私がする@ font-face構文で発生持っていた別の不可解奇妙なことは、それが名前にキャップで適切にフォントファイルをロードしないだろうということでした。これは一度しか問題ではなかったが、繰り返し机の上で頭を叩いた後、最後の手段としてフォントファイルとフォントファミリ名をすべて小文字に変更した。私はそれが常に厄介なIEの問題で、私がやっていたWebサイトは1つだけだったと思います。別のWebサイトでも同じ構文が大文字と小文字でうまくいきました）。

Answer 4

@font-face {  
font-family: 'FONT-NAME'; 
src: url('RELATIVE-FONT-URL') format('FONT-FORMAT'); 
} 

div { 
    font-family: 'FONT-NAME'; 
    font-weight: normal; 
    font-style: normal; 
} 

通常のin値でfont-weightとfont-styleを追加してくれました。