CSS 带有本地文件的 Firefox @font-face - 可下载字体：下载失败
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19817459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firefox @font-face with local file - downloadable font: download failed
提问by Charles Goodwin
I am having an issue with using a font accessed via a relative URL.
我在使用通过相对 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
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.
通过将 URL 复制/粘贴到浏览器地址栏中来访问文件表明它是正确的 URL，因为我可以下载字体。
回答by Charles Goodwin
A hat tip to Jonathan Kew's response on a relevant mozilla bugzilla entry:
乔纳森·基尤 (Jonathan Kew) 对相关 mozilla bugzilla 条目的回应的帽子提示：
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.
我相信这是按设计工作的。AIUI，这里的问题是，对于从 file:// URI 加载的页面，只有在文件系统的同一目录（或以下）中的文件才被认为是“同源”的，因此将字体放在不同的子树中(../font/) 表示它将被安全策略限制阻止。
您可以通过在 about:config 中将 security.fileuri.strict_origin_policy 设置为 false 来放松这一点，但是由于这使页面可以访问整个本地文件系统，因此需要谨慎使用。
To summarise, the "fix" without re-arranging your files:
总而言之，无需重新排列文件即可“修复”：
- Open about:config
- Set
security.fileuri.strict_origin_policyto false - Beware of the security implications
- 打开关于：配置
- 设置
security.fileuri.strict_origin_policy为假 - 注意安全隐患
The best way is, however, to make sure any resources are accessible without going back up the file system first.
但是，最好的方法是确保可以访问任何资源，而无需先备份文件系统。
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!)
注意：源策略是基于 html 计算的，而不是 css 文件！因此，除了 css 文件之外的字体文件可能不起作用，这非常令人困惑。（至少这是我认为 Firefox 的情况！）
Follow ups:
跟进：
eradman comments:
艾德曼评论：
It's the other way around: relative paths are relative to the CSS file.
反过来说：相对路径是相对于 CSS 文件的。
chrylis responds:
chrylis 回复:
You'd think that, but the actual code in Firefox doesn't seem to agree.
您可能会这么认为，但 Firefox 中的实际代码似乎并不相同。
回答by Sergiusz Wolicki
@CharlesGoodwin @eradman Actually, both statements about the origin seem true except that they probably talk about two different things: same-origin check is based on the originating HTML file, while relative URLs for font faces are resolved relative to the CSS file containing the @font-face rule.
@CharlesGoodwin @eradman 实际上，关于来源的两种说法似乎都是正确的，只是它们可能谈论两个不同的事情：同源检查基于原始 HTML 文件，而字体的相对 URL 是相对于包含@font-face 规则。
Moreover, originating HTML file is not the file that uses the font. I have the following local file structure.
此外，原始 HTML 文件不是使用该字体的文件。我有以下本地文件结构。
<base-directory>/index.htm
<base-directory>/ARPLS/toc.htm
<base-directory>/dcommon/css/fonts.css
<base-directory>/dcommon/fonts/myfont.woff
fonts.cssreferences myfont.cssvia url(../fonts/myfont.woff)and toc.htmreference fonts.cssvia <link ... href="../dcommon/css/fonts.css">. index.htmhas a hyperlink to toc.htm. Now, I have bookmarked both index.htmand toc.htm. If I use the index.htmbookmark, the font is rendered correctly. If I use the toc.htmbookmark, the font fails to load. I guess this is because myfont.woffis in a sub-directory of the directory containing index.htmbut not of the directory containing toc.htm.
fonts.css引用myfont.css经由URL（../字体/ myfont.woff）和toc.htm参考fonts.css经由<链路... HREF = “../ dcommon / CSS / fonts.css”>。index.htm有一个指向toc.htm的超链接。现在，我已将index.htm和toc.htm 加入书签。如果我使用index.htm书签，字体会正确呈现。如果我使用toc.htm书签，则无法加载字体。我猜这是因为myfont.woff位于包含index.htm的目录的子目录中，但不在包含.htm.
Observed in Firefox 38.6.
在 Firefox 38.6 中观察到。
回答by Dan Leksell
Try adding this to your web.config
尝试将其添加到您的 web.config
<system.webServer>
<staticContent>
<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
回答by shimanskybiz
Usually this happens when the original source css has relative font face declaration like so ../fonts/some-font.woff, and you compile that source CSS into bundle.css which resides at some other path. So that way you lose the path to font.
通常，当原始源 css 具有像这样的相对字体../fonts/some-font.woff外观声明，并且您将该源 CSS 编译为位于其他路径的 bundle.css时，就会发生这种情况。这样你就失去了字体的路径。
回答by mcconnelljk
I have been running into this issue since the latest update (about 1.5 weeks ago). This thread specifically, plus the comments in Bugzilla helped me to understand the problem as a security feature. The solution that I found (eventually) was to take my Firefox preferences off of "strict" security and set to standard/default. "Strict" even says it will break some sites, so I think that this goes to the above point that this issue is by-design.
自最新更新（大约 1.5 周前）以来，我一直遇到这个问题。特别是这个帖子，加上 Bugzilla 中的评论帮助我理解了这个问题作为一个安全功能。我（最终）找到的解决方案是将我的 Firefox 首选项从“严格”安全性中移除并设置为标准/默认值。“Strict”甚至说它会破坏一些网站，所以我认为这就是上述问题是设计造成的。
回答by Khandaker Toihidul Islam
For local file we have to use local()
对于本地文件，我们必须使用 local()
For external we have to use url()
对于外部我们必须使用 url()
According to the document https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
根据文档https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
For example
例如
src:local('../src_main/fonts/ElegantIcons.eot');
