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

Posted

技术标签:

【中文标题】带有本地文件的 Firefox @font-face - 可下载字体:下载失败【英文标题】:Firefox @font-face with local file - downloadable font: download failed 【发布时间】:2013-11-18 00:10:49 【问题描述】:

我在使用通过相对 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,因为我可以下载字体。

【问题讨论】:

【参考方案1】:

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

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

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

例如

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

【讨论】:

适用于本地机器既是服务器又是客户端的情况。一旦网站托管在服务器上并由作为客户端的不同计算机请求,local() 专门指客户端计算机,网站无法期望对其进行任何控制。 local() 只能与 src() 结合使用,以允许本地安装的字体优先于(或作为后备)网络字体。【参考方案2】:

自最近一次更新(大约 1.5 周前)以来,我一直遇到这个问题。特别是这个线程,加上 Bugzilla 中的 cmets 帮助我将问题理解为安全功能。我(最终)找到的解决方案是将我的 Firefox 偏好设置为“严格”安全并设置为标准/默认。 “Strict”甚至说它会破坏一些网站,所以我认为这符合上述观点,即这个问题是设计使然。

【讨论】:

这是评论,不是答案,应该放在已经提供的公认答案下,因为它所做的只是同意这一点。【参考方案3】:

这通常发生在原始源 css 具有像 ../fonts/some-font.woff 这样的相对字体声明,并且您将该源 CSS 编译成位于其他路径的 bundle.css 时。这样你就失去了字体的路径。

【讨论】:

【参考方案4】:

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

【讨论】:

【参考方案5】:

乔纳森·邱在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 cmets:

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

chrylis 回应:

你会这么认为,但 Firefox 中的实际代码似乎并不同意。

【讨论】:

我尝试了您的建议,但仍然收到错误消息。此外,我将 awesome-font 文件移动到与 css 相同的目录中,但我仍然遇到问题。 :( @CharlesGoodwin:非常感谢您®!!!我对此很疯狂,这正是显示页面所需的修复,而不是 wget 使用 --page-requisites 获取的修复。你摇滚! @Ciwan 请注意,原始策略是根据 html 而不是 css 文件计算的!因此,除了 css 文件之外的字体文件可能无法正常工作,这非常令人困惑。 这对我来说仍然是个问题。它在 chrome 上运行良好 :( . 反之亦然:相对路径是相对于 CSS 文件的。 w3.org/TR/REC-CSS1/#url【参考方案6】:

@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 通过 引用 fonts.cssindex.htm 有一个到 toc.htm 的超链接。 现在,我已经为 index.htmtoc.htm 添加了书签。如果我使用 index.htm 书签,字体会正确呈现。如果我使用 toc.htm 书签,字体无法加载。我猜这是因为 myfont.woff 位于包含 index.htm 的目录的子目录中,而不是包含 toc.htm 的目录的子目录中>.

在 Firefox 38.6 中观察到。

【讨论】:

以上是关于带有本地文件的 Firefox @font-face - 可下载字体:下载失败的主要内容,如果未能解决你的问题,请参考以下文章

为啥在调整页面大小时 Firefox 会重新请求字体?

Firefox 无法加载@font-face? [复制]

font-face 在 Firefox无法正常工作问题

Firefox 不尊重@font-face? [复制]

为啥这个@font-face 代码在 Firefox 3.6 中不起作用?

@font-face 指向本地文件的 url