如何修复火狐浏览器无法正常渲染自定义字体(@font-face)的问题？

火狐浏览器自定义字体不显示，这事说大不大，说小不小——文字变成方块或者直接回退到默认字体，页面的设计感和品牌感瞬间就没了。问题出在 @font-face 规则被静默忽略或加载失败，必须沿着字体声明、路径、格式、跨域、扩展干扰这几个关键环节一步步排查。

不用着急，先从最基础的地方开始。打开开发者工具，看一眼网络请求里的字体文件到底有没有被正确拉取，然后再对症下药。

检查 @font-face 声明语法与格式标识

Firefox 对 format() 参数出了名的敏感——写错一个字母，整条 src 规则就直接失效，而且浏览器不会给你任何报错提示。怎么查？两步走：

第一步：按 Ctrl+Shift+I 打开开发者工具，切换到“网络”标签，过滤“字体”或者直接刷新页面，看看 .woff2 或 .ttf 的请求状态是 404 还是“已取消”。如果是 404，说明路径或文件名不对；如果是“已取消”，多半是跨域或扩展拦了路。

第二步：把目光转向 CSS 里的 @font-face 段。确认 format() 的值必须严格匹配规范——.woff2 写 【'woff2'】，.ttf 写 【'truetype'】，千万别写 'ttf' 或 'TrueType' 这种变体，火狐不认。

第三步：顺手检查一下 src 属性末尾有没有多出来的逗号。比如 url('font.ttf') format('truetype'), —— 那个悬空的逗号一定要删掉，否则 Safari 和旧版 Firefox 会直接丢弃整个 src 声明，字体自然就没了。

解决跨域字体加载被拒问题

Firefox 默认会阻止跨域加载字体文件，哪怕字体文件就在同域的子路径下，也可能因为协议、端口或重定向触发 CORS 拦截。两个办法：

方法一：服务端配置 Access-Control-Allow-Origin 头（推荐）

Apache 用户，在 .htaccess 里加上：
＜FilesMatch "\.(eot|ttf|otf|woff|woff2)"＞
　　Header set Access-Control-Allow-Origin "*"
＜/FilesMatch＞

Nginx 用户，在 server 块里加上：
location ~* \.(eot|ttf|otf|woff|woff2)$ {
　　add_header Access-Control-Allow-Origin '*';
}

方法二：本地开发没有服务端权限时，改用 Base64 内联字体

把 .ttf 文件扔进 Fontsquirrel 的 @font-face Generator，选 Expert 模式，勾上“Base64 encode”再生成。下载下来的 CSS 里直接把字体二进制转成了字符串嵌入进去，这种做法能彻底绕过跨域限制。

排除浏览器扩展干扰

NoScript、uBlock Origin 这类安全扩展可能会主动屏蔽 @font-face 加载规则，特别是当字体域名被判定为第三方资源时。怎么验证？

在地址栏输入 about:addons，点“扩展”，临时禁用所有扩展，然后刷新网页看看字体是否恢复。如果恢复了，就逐个启用扩展定位问题源。对于 NoScript，请进入它的选项 → “嵌入”标签页 → 取消勾选 【禁止 @font-face】 选项。

强制启用 WebRender 并重置字体渲染链

有些显卡驱动和 Firefox 默认渲染路径有冲突，导致字体解析成功了但光栅化阶段把字形轮廓给丢了。可以强制打开 WebRender 试试：

① 地址栏输入 about:config → 接受风险继续 → 搜索 gfx.webrender.all → 双击设为 true
② 搜索 gfx.webrender.enabled → 确保值为 true
③ 搜索 gfx.webrender.force-enabled → 若不存在，右键新建布尔值，名称填这个字段，值设为 true
④ 关闭所有窗口，重启 Firefox
⑤ 进 about:preferences#general → “语言和外观” → “字体和颜色” → 点“设置” → 取消勾选“允许页面选择自己的字体”，再点“确认”

这一步能切断网页 font-family 的覆盖，让 @font-face 声明真正生效。做完上面所有步骤，大部分自定义字体不显示的问题都能解决。