web-dev-qa-db-ja.com

@ font-faceが機能しないchrome

最新バージョンの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');
}
google-chromecssfont-face
17
Bojan Savic

おそらく準拠しているブラウザで@ font-faceが不可解に機能しない場合はいつでも、これを.htaccessファイルにドロップします。一部のブラウザーは他のドメインでホストされているフォントをロードしないと思われ、このコードはそれをトラブルシューティングしますが、同じドメインでホストされているフォントを強制的にロードする唯一の解決策である場合もあります。一般的には、Firefoxの方がChromeよりも問題が多くなりますが、私はこれを使用して、ChromeでFirefoxが正常に動作しているときにフォントを強制しました。図を参照してください。

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

@ font-face構文で発生したもう1つの不可解な奇妙なことは、名前に大文字が含まれているフォントファイルを適切にロードしないことでした。これは1度だけ問題で、@ font-faceのトラブルシューティングを何度も行って机にぶつけた後、さまざまな方法でトラブルシューティングを行いました。最後の手段として、すべてのフォントファイルとフォントファミリ名を小文字に変更しましたが、問題なく動作しました（私はそれが常に精巧なIEの問題だったと思います、そして私がやっていた1つのWebサイトだけ、別のWebサイトでまったく同じ構文が大文字と小文字でうまく機能しました）。

9
thelindsaybutler

フォントファイルを「fonts」という名前のフォルダーに配置し、CSSファイルを「style」という名前のフォルダーに配置する場合は、次のようにURLを記述します。

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

私はこのような同じ間違いを修正しました。

7
Lenville

これを試して

   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'), /* Modern Browsers */
     url('DejaWeb-Bol.ttf') format('truetype'), /* Safari, Android, iOS */
     url('DejaWeb-Bol.svg#Dejaweb') format('svg'); /* Legacy iOS; correction on this line */
     font-weight:bold;
    font-style:normal;
  }
6
jmishra
@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;
}

Font-weightとfont-styleを通常の値で追加するとうまくいきました。

0
Mayank Gupta