web-dev-qa-db-ja.com

ローカルファイルを含むFirefox @ font-face-ダウンロード可能なフォント：ダウンロードに失敗しました

相対URLからアクセスしたフォントの使用に問題があります。

@font-face {
    font-family: 'ElegantIcons';
    src:url('../src_main/fonts/ElegantIcons.eot');
    src:url('../src_main/fonts/ElegantIcons.ttf') format('truetype'),
        url('../src_main/fonts/ElegantIcons.svg#ElegantIcons') format('svg'),
        url('../src_main/fonts/ElegantIcons.woff') format('woff'),
        url('../src_main/fonts/ElegantIcons.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Webページにアクセスするとフォントが機能せず、コンソールで次のようになります。

downloadable font: download failed (font-family: "ElegantIcons" style:normal weight:normal stretch:normal src index:1): status=2147500037
source: file:///...snipped.../src_main/fonts/ElegantIcons.woff @ file:///...snipped.../src_poke/fonts-style.css

URLをブラウザのアドレスバーにコピー/貼り付けしてファイルにアクセスすると、フォントをダウンロードできるため、それが正しいURLであることがわかります。

cssfirefoxfontsfont-face
18
Charles Goodwin

関連するMozilla Bugzillaエントリ に対するJonathan Kewの応答に対するハットヒント：

これは設計どおりに機能していると思います。 AIUI、ここでの問題は、file：// URIからロードされたページの場合、ファイルシステムの同じディレクトリ内（またはそれ以下）のファイルのみが「同じオリジン」と見なされるため、フォントを別のサブツリーに置くことです。 （../font/）は、セキュリティポリシーの制限によってブロックされることを意味します。

これは、about：configでsecurity.fileuri.strict_Origin_policyをfalseに設定することで緩和できますが、これにより、ページからローカルファイルシステム全体にアクセスできるようになるため、注意して使用する必要があります。

要約すると、ファイルを再配置せずに「修正」します。

  • About：configを開きます
  • セットする security.fileuri.strict_Origin_policyをfalseに
  • セキュリティへの影響に注意する

ただし、最善の方法は、最初にファイルシステムをバックアップしなくても、リソースにアクセスできるようにすることです。

注：Originのポリシーは、CSSファイルではなく、HTMLに基づいて計算されます！したがって、cssファイルのすぐ横にあるフォントファイルが機能しない可能性があり、非常に混乱します。 （少なくとも、これは私がFirefoxの場合だと思っていたものです！）

フォローアップ：

eradmanのコメント：

それは逆です：相対パスは CSSファイルに対する相対 です。

クリリスは応答します：

あなたはそう思うでしょうが、Firefoxの実際のコードは同意していないようです。

29
Charles Goodwin

@CharlesGoodwin @eradman実際には、Originに関する両方のステートメントは、おそらく2つの異なることについて話していることを除いて、真実であるように見えます。同じ原点チェックは元のHTMLファイルに基づいています@ font-faceルール。

さらに、元のHTMLファイルは、フォントを使用するファイルではありません。次のローカルファイル構造があります。

<base-directory>/index.htm
<base-directory>/ARPLS/toc.htm
<base-directory>/dcommon/css/fonts.css
<base-directory>/dcommon/fonts/myfont.woff

fonts.css参照myfont.cssviaurl（../ fonts/myfont.woff） およびtoc.htm参照fonts.cssvia<link ... href = "../ dcommon/css/fonts.css">。 index.htmにはtoc.htmへのハイパーリンクがあります。 index.htmとtoc.htmの両方をブックマークしました。 index.htmブックマークを使用すると、フォントが正しくレンダリングされます。 toc.htmブックマークを使用すると、フォントの読み込みに失敗します。これはmyfont.woffがindex.htmを含むディレクトリのサブディレクトリにあるが、ディレクトリのサブディレクトリにないためだと思いますtoc.htmを含みます。

Firefox 38.6で観察されました。

3
Sergiusz Wolicki

ローカルファイルの場合、local()を使用する必要があります

外部の場合、url()を使用する必要があります

ドキュメントによると https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

例えば

src:local('../src_main/fonts/ElegantIcons.eot');
1
Khandaker Toihidul Islam

これをweb.configに追加してみてください

<system.webServer>
<staticContent>
  <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
0
Dan Leksell

通常、これは、元のソースcssに次のような相対フォントフェース宣言がある場合に発生します../fonts/some-font.woff、そしてそのソースCSSを他のパスにあるbundle.cssにコンパイルします。そのため、フォントへのパスが失われます。

0
shimanskybiz

この問題は、最新の更新（約1.5週間前）から発生しています。特にこのスレッドと、Bugzillaのコメントは、セキュリティ機能として問題を理解するのに役立ちました。 （最終的に）私が見つけた解決策は、Firefoxの設定を「厳密な」セキュリティから外して、標準/デフォルトに設定することでした。 「厳格」とは一部のサイトを壊すとさえ言われているので、この問題は仕様によるものであるという上記のポイントに行くと思います。

0
mcconnelljk