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

Question

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

21

我在使用相对路径访问字体时遇到了问题。

@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正确，因为我可以下载字体。

- Charles Goodwin

6个回答

8

对于本地文件，我们需要使用local()

对于外部文件，我们需要使用url()

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

例如

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

- Khandaker Toihidul Islam

4

仅当本地机器同时充当服务器和客户端时，才适用此操作。一旦网站托管在服务器上，并由作为客户端的不同机器请求，local() 仅指客户端机器，网站无法控制该机器。 local() 应仅与 src() 结合使用，以便于本地安装的字体优先于 Web 字体（或作为后备），请注意不要改变原来的意思。 - Janus Bahs Jacquet

4

@CharlesGoodwin @eradman实际上，两个关于来源的声明都是真实的，只是它们可能谈论两件不同的事情：same-origin检查基于原始HTML文件，而字体面向的相对URL是相对于包含@font-face规则的CSS文件解析的。

此外，原始的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)引用了myfont.css，toc.htm通过<link ... href="../dcommon/css/fonts.css">引用了fonts.css。在index.htm中有一个指向toc.htm的超链接。

现在我已经将index.htm和toc.htm都加入了书签。如果我使用index.htm的书签，字体会被正确渲染。如果我使用toc.htm的书签，字体加载失败。我猜这是因为myfont.woff位于包含index.htm的目录的子目录中，但不是包含toc.htm的目录的子目录。

在Firefox 38.6中观察到此问题。

- Sergiusz Wolicki

0

尝试将这段代码添加到你的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>

- Dan Leksell

0

通常情况下，这种情况发生在原始源CSS具有相对字体声明的情况下，例如../fonts/some-font.woff，并且您将该源CSS编译为bundle.css，该文件位于其他路径。因此，您会失去字体的路径。

- shimanskybiz

0

自从最近的更新（大约1.5周前）以来，我一直遇到这个问题。这个帖子特别是Bugzilla中的评论帮助我理解了这个问题是一个安全功能。我最终找到的解决方案是将我的Firefox首选项从“严格”安全设置为标准/默认设置。即使“严格”模式会破坏一些网站，所以我认为这证明了这个问题是按设计而来的。

- mcconnelljk

这是一条评论，而不是答案，应该放在已经提供的被认可的答案下面，因为它只是赞同那个答案。 - Charles Goodwin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charles Goodwin · Accepted Answer

关于本地字体无法加载的问题

感谢 Jonathan Kew 在mozilla bugzilla entry中的回答：

我认为这是按设计工作的。据我所知，问题在于对于从 file://URI 加载的页面，只考虑文件系统相同目录（或以下）中的文件属于“同一来源”，因此将字体放在不同子树（../font/）中意味着它将被安全策略限制阻止。

你可以通过在 about:config 中设置 security.fileuri.strict_origin_policy 为 false 来放宽限制，但由于这会给页面访问整个本地文件系统，因此需要谨慎使用。

总之，解决方法如下而无需重新排列文件：

打开 about:config
将 security.fileuri.strict_origin_policy 设为 false
注意与此相关的安全问题

最好的方法是确保任何资源都可以直接访问，而无需先返回到文件系统的上一级。

注意：源策略是基于 HTML 而非 CSS 文件计算的！因此，一个字体文件和一个 CSS 文件旁边可能无法正常工作，这非常令人困惑。（至少在我认为的 Firefox 中是这样！）

跟进：

eradman 评论道：

恰恰相反：相对路径是相对于 CSS 文件的。

chrylis 回答道：

你会认为是这样，但实际上 Firefox 中的代码似乎并不同意。