带有本地文件的 Firefox @font-face - 可下载字体:下载失败 [英] Firefox @font-face with local file - downloadable font: download failed

问题描述

我在使用通过相对 URL 访问的字体时遇到问题.

I am having an issue with using a font accessed via a relative 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;
}

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

When I access the web page the font doesn't work and in the console I get this:

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

Accessing the file by copying/pasting the URL into the browser address bar shows that it is the correct URL as I can download the font.

推荐答案

关于 Jonathan Kew 对 相关的 mozilla bugzilla 条目:

A hat tip to Jonathan Kew's response on a relevant mozilla bugzilla entry:

我相信这是按设计工作的.AIUI，这里的问题是对于从 file://URI 加载的页面，只有位于(或低于)文件系统的同一目录被认为是同源"的，因此将字体放在不同的子树(../font/)中意味着它将被安全策略限制阻止.

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.

您可以通过将 security.fileuri.strict_origin_policy 设置为about:config 中的 false，但因为这使页面可以访问您的整个本地文件系统，请谨慎使用.

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.

总而言之，无需重新排列文件即可修复":

To summarise, the "fix" without re-arranging your files:

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

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

The best way is, however, to make sure any resources are accessible without going back up the file system first.

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

Note: the origin policy is calculated based on the html, NOT the css file! So a font file right besides an css file might not work, which is very confusing. (At least this is what I thought was the case with Firefox!)

跟进:

eradman 评论:

eradman comments:

相反:相对路径是相对于 CSS 文件.

chrylis 回应:

chrylis responds:

您可能会这么认为，但 Firefox 中的实际代码似乎与此不一致.

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

这篇关于带有本地文件的 Firefox @font-face - 可下载字体:下载失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！