Firefox 60中CSS @font-face相对路径加载字体失败求助

我来帮你搞定这个字体加载的问题！结合你的文件夹结构（E:/1/index.html、E:/abc.ttf）和Firefox 60的特性，给你几个可行的解决方案：

1. 优化@font-face写法（补充字体格式声明） #

你的相对路径../abc.ttf本身是正确的，但可以给@font-face补充字体格式声明，帮助Firefox更好识别字体类型，修改后的CSS代码如下：

<style>
@font-face {
  font-family: abc;
  src: url('../abc.ttf') format('truetype');
}
* {
  font-family: abc;
}
</style>

2. 关闭Firefox本地文件的严格同源限制 #

Firefox对于本地file://协议加载资源有严格的安全限制，这很可能是字体加载失败的核心原因。你可以按以下步骤修改设置：

• 在Firefox地址栏输入about:config，点击“接受风险并继续”
• 在搜索框输入security.fileuri.strict_origin_policy
• 双击该选项，将其值从true改为false
• 重启Firefox后再测试页面

3. 改用绝对路径直接指定字体位置 #

如果上述方法无效，可以直接使用本地绝对路径，让浏览器精准定位字体文件：

<style>
@font-face {
  font-family: abc;
  src: url('file:///E:/abc.ttf') format('truetype');
}
* {
  font-family: abc;
}
</style>

4. 最后检查基础问题 #

• 确认abc.ttf文件确实存在于E:/根目录，文件名没有拼写错误（比如大小写、后缀名错误）
• 尝试重新保存HTML文件，确保CSS代码没有语法错误

内容的提问来源于stack exchange，提问作者Tatina T.