9

実行中の OSS アプリで FontAwesome フォントを使用していますが、Firefox のフォント サニタイザーを通過できないようです。

ファイルはすべて同じドメインで提供され、パスは正しいです。私は、FontAwesome の公式 css を使用しています。これは、サイトとローカル ドキュメントを介して提供されたときに Firefox で動作します。

だから私は単純なものが欠けているに違いありません。

ライブ URL: https://bmark.us

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css

これは、開発者経由でこれを修正しようとしたときの Firefox のエラーの例です。完全なルート パス /static/font および css ../font/ に対する相対パスを実行しようとしましたが、常にこれらのエラーで失敗します。

Chromeなどですべてが機能します。Firefox が私を嫌っているようにしか見えません。他の回答を検索したところ、一連のフォントフェイスがすべて見つかりました。

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

ヒントをありがとう。

4

5 に答える 5

9

ありがとう、これは 2 つの部分の問題でした。

2番目の部分が最初に来ます。fontawesome.scss のサンプル css では、さまざまなフォント形式のパスを一重引用符で囲んでいます。それらに対してscssビルダー（pyscss）を実行すると、それらが削除されました。それらは二重引用符である必要がありました。

引用符がなかったため、FF は src: url(...) ビットの解析に失敗しました。IE が持つべき src: ..eot しか持っていないことに失敗したため、FF では機能しませんでした。

引用符を二重引用符に変更すると、すべてがうまくいきました。

これはpyscssを使用した私のせいであり、Firefoxの構文を壊してしまったのはパーサーです。

これを詳しく調べるのを手伝ってくれてありがとう、マット。

于 2012-06-18T18:07:47.717 に答える
4

A) サーバーに eot/woff/ttf/svg の MIME タイプが設定されていますか?? B) EOT で問題が発生しているようです。これは、Firefox が EOT をサポートしていないという事実によって説明できます。WOFF と TTF を使用します。C) Firebug または Firefox のネイティブ開発者ツールを使用してデバッグを試みましたか? D) あなたの (関連する) CSS と HTML を投稿できますか?

于 2012-06-18T14:37:41.093 に答える
4

クライアントの Web サイトの 1 つで同じ問題に遭遇しました。

@font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg');
}

上記はfirefoxで機能しました。以下のものは機能しませんでした。

@font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg);
}

フォーマット指定子は、format('svg') のように引用符で囲む必要があることがわかりました。サイトが提供する css スタイルシートの中には、書式指定子を引用していないものがあります。一重引用符と二重引用符の両方を使用してパスを試しましたが、違いはありませんでした。したがって、二重/一重引用符で囲まれたパスではなく、引用符で囲まれていない形式指定子の問題であると言えます。

于 2014-11-24T01:45:27.570 に答える
3

私の場合、.eot/ .woff/ .svg/ .ttf ファイルを他の静的コンテンツ (css、png など) と同じ *.war ファイルに配置するだけで十分でした。FF と IE は、他のサーバーからフォント ファイルをダウンロードするのが危険だと判断したようです。

于 2012-09-06T14:09:21.770 に答える