Firefox @ font-face与本地文件 - 可下载字体:下载失败

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对相关mozilla bugzilla条目的回应:

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

您可以通过在about:config中将security.fileuri.strict_origin_policy设置为false来放宽这一点,但是由于这使得页面可以访问整个本地文件系统,因此需要谨慎使用.

总而言之,"修复"而无需重新安排文件:

• 打开about:config
• 设为security.fileuri.strict_origin_policyfalse
• 注意安全隐患

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

注意:原始策略是基于html而不是css文件计算的!因此,除了css文件之外的字体文件可能无法正常工作,这非常令人困惑.(至少这是我认为的Firefox的情况!)

跟进:

埃拉德曼评论:

反过来说:相对路径是相对于CSS文件的.

chrylis回应:

你会想到,但Firefox中的实际代码似乎并不一致.

Answer 2

对于本地文件，我们必须使用 local()

对于外部我们必须使用 url()

根据文档https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

例如

src:local('../src_main/fonts/ElegantIcons.eot');