firefox @ font-faceはfontawesomeで失敗する

私は実行しているOSSアプリケーションでFontAwesomeフォントを使用していますが、Firefoxのフォントサニタイザを通過できないようです。firefox @ font-faceはfontawesomeで失敗する

ファイルはすべて同じドメインに配信されています。パスは正しいですし、FontAwesomeの公式CSSを使用しています.FaxAwesomeはサイトやローカルのドキュメントを使ってFirefoxで動作します。

だから私は単純なものを見逃しているに違いない。

ライブURL：私はDEV経由でこれを修正しようとすると、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のエラーの例です。私は完全なルートパス/静的/フォントとcss ../font/に相対的にしようとしました。そして、私は常にこれらのエラーで失敗します。

すべてはChromeなどで動作します。 Firefoxは私を嫌っているようだ。私は他の答えを探してきました。私はフォント面全体を持っています。任意のヒントについて

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

感謝。

出典

2012-06-17 Rick

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

出典

2012-06-18 14:37:41

ありがとう、これは2つの部分の問題でした。 2番目の部分が最初に来ます。 fontawesome.scssのサンプルCSSでは、さまざまなフォント形式のパスを一重引用符で囲みます。私は自分のscssビルダーを走らせて、それを取り除いた。彼らは二重引用符である必要がありました。引用符がないので、FFはsrc：ビットを解析できませんでした。それはそれが失敗したので、それだけでsrcを持っていた：..それはIEが持つことを意味し、それはFFで動作しませんでした。引用符を二重引用符に変更すると、すべてが幸せになりました。 – Rick

すごい！良いキャッチ、リック。 –

実際、Firefoxでは、Content-Typeヘッダーは無視されます。 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Notes – Martin

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

2番目の部分が先頭です。 fontawesome.scssのサンプルCSSでは、さまざまなフォント形式のパスを一重引用符で囲みます。私は自分のscssビルダー（pyscss）を走らせて、それを取り除いた。彼らは二重引用符である必要がありました。

引用符がないため、FFはsrc：url（...）ビットを解析できませんでした。それはそれが失敗したので、それだけでsrcを持っていた：..それはIEが持つことを意味し、それはFFで動作しませんでした。

引用符を二重引用符に変更すると、すべてが幸せになりました。

これは私のせいで、pyscssを使っていて、それはFirefoxの構文を破ったパーサーです。

ありがとうございましたMatt私はこれをより詳しく見るのを手伝ってくれました。

出典

2012-06-18 18:07:47 Rick

私は同じエラーがありましたが、引用符は問題ではありませんでした。私の解決策は、フォントをhttp://www.fontsquirrel.com/tools/webfont-generatorのTTFファイルから再変換してから再アップロードすることでした。その後、エラーは消えた。 – Justin

は、私の場合は配置され、他の静的コンテンツ（CSS、PNGなど）と同じ* .warファイルに.eot/ .woff/.SVG/の.ttfファイルを配置するのに十分でした。 FFやIEのように、危険な他のサーバーからフォントファイルをダウンロードしているようです。

出典

2012-09-06 14:09:21 Majek

私のクライアントのウェブサイトの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); 
}

フォーマット指定子は、フォーマット（ 'svg'）のように引用符で囲む必要があります。サイトが提供するCSSスタイルシートの中には、フォーマット指定子を引用しないものがあります。私は一重引用符と二重引用符の両方でパスを試したが、それは何の違いもありませんでした。ですから、二重引用符で囲まれたパスではなく、引用符で囲まれていない書式指定子では問題であると言えるでしょう。

出典

2014-11-24 01:45:27 dors

私はこれが遅くなることを知っていますが、CDNのfont-awesomeを使用することをお勧めします。そうした場合、この種のエラーに遭遇することはほとんどありません。

@font-face { 
 
    font-family: FontAwesome; 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot"); 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg"); 
 
    font-weight: 400; 
 
    font-style: normal 
 
}

をし、ヘッドの代わりに

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    
 
</head

にCDNからのリンクを使用する：あなたは、外部ファイルからフォントを参照する場合は

、行をコメントアウト

あなたは行くのがよいでしょう。

出典

2017-10-21 04:49:35 user3774167

firefox @ font-faceはfontawesomeで失敗する

答えて

関連する問題