我在使用通过相对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,因为我可以下载字体。
Jonathan Kew对相关Mozilla bugzilla条目的回应的帽子提示:
我相信这是按设计工作的。AIUI,这里的问题是 对于从 file://URI 加载的页面,只有 文件系统的同一目录被认为是"同源", 因此将字体放在不同的子树中(../font/) 表示它 将被安全策略限制阻止。
您可以通过将security.fileuri.strict_origin_policy设置为 在关于:配置中为 false,但这会使页面可以访问您的 整个本地文件系统,需要谨慎使用。
总而言之,无需重新排列文件的"修复":
- 打开关于:配置
- 将
security.fileuri.strict_origin_policy
设置为 false - 当心安全隐患
但是,最好的方法是确保无需先备份文件系统即可访问任何资源。
注意:源策略是根据 html 计算的,而不是 css 文件!因此,除了css文件之外的字体文件可能无法正常工作,这非常令人困惑。(至少我认为火狐是这样!
跟进:
埃拉德曼评论:
反之亦然:相对路径是相对于CSS文件。
克莱利斯回应道:
你会这么想,但 Firefox 中的实际代码似乎并不一致。
对于本地文件,我们必须使用 local()
对于外部,我们必须使用url()
根据文件 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
例如
src:local('../src_main/fonts/ElegantIcons.eot');
@CharlesGoodwin @eradman 实际上,关于起源的两个陈述似乎都是正确的,除了它们可能谈论了两件不同的事情:同源检查基于原始 HTML 文件,而字体的相对 URL 是相对于包含@font面规则的 CSS 文件解析的。
此外,原始 HTML 文件不是使用该字体的文件。我有以下本地文件结构。
<base-directory>/index.htm
<base-directory>/ARPLS/toc.htm
<base-directory>/dcommon/css/fonts.css
<base-directory>/dcommon/fonts/myfont.woff
字体.css引用myfont.css通过URL(../fonts/myfont.woff) 和 toc.htm 引用字体.css通过 .index.htm 具有指向 TOC.htm 的超链接。现在,我已经为索引.htm和目录.htm添加了书签。如果我使用索引.htm书签,字体会正确呈现。如果我使用 toc.htm 书签,字体无法加载。我想这是因为myfont.woff位于包含索引的目录的子目录中.htm而不是包含toc.htm的目录的子目录中。
在 Firefox 38.6 中观察到。
尝试将其添加到您的 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>
,当原始源 css 具有相对字体面声明时,就会发生这种情况,例如 ../fonts/some-font.woff
,并且您将该源 CSS 编译为驻留在其他路径的捆绑包.css该捆绑包位于其他路径。这样你就会失去字体的路径。
自最新更新(大约 1.5 周前)以来,我一直遇到此问题。特别是这个线程,加上 Bugzilla 中的评论帮助我将问题理解为安全功能。 我(最终)找到的解决方案是将我的Firefox首选项从"严格"安全性中删除并设置为标准/默认值。 "严格"甚至说它会破坏一些网站,所以我认为这上面就是这个问题是设计使然。