css - 带有本地文件的 Firefox @font-face - 可下载字体 : download failed

Question

我在使用通过相对 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;
}

当我访问网页时，字体不起作用，在控制台中我得到这个:

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，因为我可以下载字体。

Answer 1

Jonathan Kew 在 relevant mozilla bugzilla entry 上的回应:

I believe this is working as designed. AIUI, the issue here is that for a page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions.

You can relax this by setting security.fileuri.strict_origin_policy to false in about:config, but as this gives the page access to your entire local filesystem, it's something to be used with caution.

总而言之，无需重新安排文件的“修复”:

• 打开about:config
• 将 security.fileuri.strict_origin_policy 设置为 false
• 注意安全隐患

但是，最好的方法是确保可以访问任何资源，而无需先备份文件系统。

注意: 源策略是根据 html 计算的，而不是 css 文件!因此，除了 css 文件之外的字体文件可能不起作用，这非常令人困惑。 (至少我认为 Firefox 就是这种情况!)

跟进:

读者评论:

It's the other way around: relative paths are relative to the CSS file.

克莉丝回应:

You'd think that, but the actual code in Firefox doesn't seem to agree.