19

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

4

6 回答 6

32

Jonathan Kew 对相关 mozilla bugzilla 条目的回应的帽子提示：

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

您可以通过在 about:config 中将 security.fileuri.strict_origin_policy 设置为 false 来放松这一点，但是由于这使页面可以访问您的整个本地文件系统，因此需要谨慎使用。

总而言之，“修复”无需重新安排文件：

  • 打开关于：配置
  • 设置security.fileuri.strict_origin_policy为假
  • 注意安全隐患

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

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

跟进：

埃拉德曼评论：

反过来说：相对路径是相对于 CSS 文件的。

chrylis 回复:

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

于 2013-11-06T16:31:21.120 回答
5

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

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

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

例如

src:local('../src_main/fonts/ElegantIcons.eot');
于 2020-01-05T14:39:11.063 回答
4

@CharlesGoodwin @eradman 实际上，关于起源的两种说法似乎都是正确的，只是它们可能谈论了两个不同的事情：同源检查基于原始 HTML 文件，而字体的相对 URL 相对于包含@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)引用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的目录的子目录中，但不在包含的目录中目录.htm。

在 Firefox 38.6 中观察到。

于 2016-02-08T01:10:34.983 回答
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>
于 2017-08-09T06:31:20.057 回答
0

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

于 2018-11-22T19:04:43.693 回答
0

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

于 2019-08-06T15:21:53.943 回答