Firefox @ font-face与本地文件 - 可下载字体:下载失败 [英] Firefox @font-face with local file - downloadable font: download failed
问题描述
我在使用通过相对网址访问的字体时遇到问题。
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复制/粘贴到浏览器地址栏中来访问文件
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,这里的问题是
从一个文件:// 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.
通过在about:config中将security.fileuri.strict_origin_policy设置为
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 - 小心安全隐患
- Open about:config
- Set
security.fileuri.strict_origin_policy
to false - Beware of the security implications
但是,最好的方法是确保任何资源都可访问,而不必备份文件系统首先。
The best way is, however, to make sure any resources are accessible without going back up the file system first.
注意:源策略是基于html而不是css文件计算的!因此,除了css文件之外的字体文件可能不工作,这是非常混乱。
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屋!