在 Firefox 68 的 file:/// 上的 HTML 文件中使用@font面



来自 MDN :

当用户使用 Firefox 67 中的file:///URI 打开页面时,并且 早些时候,页面的源被定义为来自的目录 页面已打开。同一目录中的资源及其 出于以下目的,子目录被视为具有相同的来源 CORS 同源规则。

为了响应 CVE-2019-11730,Firefox 68 及更高版本定义了 使用唯一file:///URI 打开的页面的原点。因此 同一目录或其子目录中的其他资源不再 满足 CORS 同源规则。此新行为由 默认使用privacy.file_unique_origin首选项。

也:

CORS 请求只能使用 HTTPS URL 方案,但指定的 URL 由请求是不同的类型。如果 URL 使用file:///URL 指定本地文件。

要解决此问题,只需确保在发出时使用HTTPS URL 涉及 CORS 的请求,例如XMLHttpRequest、获取 API、Web 字体 (@font-face)、WebGL 纹理和 XSL 样式表。

使用@font-face时"简单地确保使用HTTPS URL"的建议很好,并且全部适用于服务器上的文件,但是应该在本地运行的HTML文件呢?

例如,我处理的一些HTML文件被用作Java产品的文档。这些产品已交付给我们的客户,如果我们的客户想学习如何使用我们的产品,他们应该在他们的笔记本电脑和台式机(不运行网络服务器)上打开这些HTML文件。

我能想到的继续使用我们的 Web 字体(包括一些图标字体)的唯一方法是将字体嵌入我的 CSS 文件中,而不是将它们链接到外部。

我是否忽略了其他选项?

另一种选择:耐心。Firefox 69 修复了此错误,因此更新后,@font-face再次工作。

最新更新