Question

我在使用通过相对网址访问的字体时遇到问题。

@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的答复：

我相信这是按设计工作的。 AIUI，这里的问题是   对于从file：// URI加载的页面，只有（或以下）文件   文件系统的同一目录被认为是“同源”，   所以将字体放在不同的子树（../font/）意味着它   将被安全政策限制阻止。

您可以通过将security.fileuri.strict_origin_policy设置为来放宽此功能   在about：config中为false，但是这样可以让页面访问您的   整个本地文件系统，这是谨慎使用的东西。

总结一下，“修复”而无需重新安排文件：

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

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

注意：原始政策是根据html计算的，而不是css文件！因此，除了css文件之外的字体文件可能无法正常工作，这非常令人困惑。 （至少这是我认为的Firefox的情况！）

跟进：

eradman评论：

反过来说：相对路径是relative to the CSS file。

chrylis回应：

您认为，但Firefox中的实际代码似乎并不一致。

Answer 2

@CharlesGoodwin @eradman实际上，关于原点的两个陈述似乎都是正确的，除了它们可能谈论两个不同的东西：同源检查基于原始HTML文件，而字体面的相对URL是相对于CSS解析的包含@ font-face规则的文件。

此外，原始HTML文件不是使用该字体的文件。我有以下本地文件结构。

<base-directory>/index.htm
<base-directory>/ARPLS/toc.htm
<base-directory>/dcommon/css/fonts.css
<base-directory>/dcommon/fonts/myfont.woff

fonts.css 通过 url（../ fonts / myfont.woff）和 toc.htm引用 myfont.css 通过＆lt; link ... href =“../ dcommon / css / fonts.css”＆gt; 引用 fonts.css 。 index.htm 具有指向 toc.htm 的超链接。现在，我已经为 index.htm 和 toc.htm 添加了书签。如果我使用 index.htm 书签，则会正确呈现字体。如果我使用 toc.htm 书签，则无法加载字体。我想这是因为 myfont.woff 位于包含 index.htm 的目录的子目录中，而不是包含 toc.htm

在Firefox 38.6中观察。

Answer 3

尝试将此添加到您的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>

Answer 4

通常，当原始源CSS具有类似../fonts/some-font.woff之类的相对字体声明时，就会发生这种情况，并且您将该源CSS编译为位于其他路径的bundle.css。这样一来，您就失去了字体的路径。

Answer 5

自最新更新（大约1.5周前）以来，我一直在遇到此问题。具体来说，该线程以及Bugzilla中的注释帮助我将问题理解为安全功能。我发现的解决方案（最终）是使我的Firefox首选项脱离“严格”安全性，并设置为标准/默认。 “严格”甚至说它将破坏某些站点，所以我认为这是上面提到的问题，这是设计使然。

Answer 6

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

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

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

例如

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

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

6 个答案: