19

相対 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 であることがわかります。

4

6 に答える 6

32

関連する mozilla bugzilla エントリに対する Jonathan Kew の回答へのハット チップ:

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

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

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

  • about:config を開く
  • security.fileuri.strict_origin_policyfalse に設定
  • セキュリティへの影響に注意してください

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

注:オリジン ポリシーは、css ファイルではなく、html に基づいて計算されます。そのため、css ファイルのすぐ横にあるフォント ファイルは機能しない可能性があり、非常に混乱します。(少なくとも、これは Firefox の場合だと思いました!)

フォローアップ:

エラドマンのコメント:

逆です: 相対パスはCSS ファイルに対して相対的です。

クリリスは次のように答えます。

と思うかもしれませんが、Firefox の実際のコードは一致していないようです。

于 2013-11-06T16:31:21.120 に答える
5

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

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

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

例えば

src:local('../src_main/fonts/ElegantIcons.eot');
于 2020-01-05T14:39:11.063 に答える