如何解决CSS字体图标在Firefox显示为方块_通过正确设置MIME类型与CORS
Firefox字体图标加载失败主因是CORS策略严格、MIME类型未正确声明或用户禁用页面字体权限，需分别配置服务器Access-Control-Allow-Origin头、设置font/woff2等MIME类型，并确保用户启用“允许页面选择显示字体”选项。
Firefox加载字体图标返回404或跨域失败
Firefox对字体资源的CORS策略比Chrome更严格，如果服务器没配 Access-Control-Allow-Origin: *，即使字体文件存在，也会被静默拦截。打开开发者工具的 Network 面板，筛选 font，看对应 .woff2 请求是否状态码为 0 或 403；如果是，说明请求被CORS阻止，而非路径错误。
常见做法是：Nginx 配置中在 location ~ .(woff2|woff|ttf|eot|svg)$ 块内添加：
add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET';
注意：不能只加在根 location，必须覆盖字体后缀匹配的路径；若使用 CDN（如 Cloudflare），需确认其未覆盖或清除该响应头。
服务器未声明font/woff2等MIME类型
Firefox 拒绝加载 MIME 类型不匹配的字体文件——哪怕文件本身完好。比如 iconfont.woff2 返回 text/plain 或 application/octet-stream，Firefox 就直接丢弃，不报错也不渲染，最终显示方块。
立即学习“前端免费学习笔记（深入）”；
检查方式：选中 Network 中的字体请求 → 查看 Response Headers → 确认 Content-Type 值是否为：
-
font/woff2（对应 .woff2） -
font/woff（对应 .woff） -
font/ttf（对应 .ttf） -
application/vnd.ms-fontobject（对应 .eot）
Nginx 示例配置：
types { font/woff2 woff2; font/woff woff; font/ttf ttf; application/vnd.ms-fontobject eot; image/svg+xml svg;}
Apache 用户需确保 mime_module 已启用，并在 .htaccess 或主配置中添加 AddType 指令。
@font-face 中漏掉 woff2 或格式顺序不对
Firefox 100+ 默认优先尝试 woff2，如果 @font-face 的 src 列表里没有 woff2，或把它写在 woff 后面，Firefox 可能跳过后续格式，导致 fallback 失效。
正确写法要满足两个条件：
-
woff2必须出现在src列表最前面（现代浏览器按顺序尝试） - 所有格式都得带
format()声明，不能只靠文件扩展名推断 - 避免只提供
ttf—— Firefox 对它的支持不稳定，尤其在某些 Linux 发行版上
推荐最小可用模板：
@font-face { font-family: "iconfont"; src: url("/fonts/iconfont.woff2") format("woff2"), url("/fonts/iconfont.woff") format("woff"), url("/fonts/iconfont.ttf") format("truetype"); font-display: swap;}
Firefox强制字体回退导致图标被覆盖
Firefox 的“允许页面选择字体”开关被关闭时（即禁用页面指定字体），会无视 @font-face 和 font-family 声明，强行用系统默认字体渲染，而系统字体不含图标 Unicode 码点，结果就是方块或空格。
用户侧可手动修复：地址栏输入 about:preferences#general → “语言和外观” → “高级” → 勾选 允许页面选择显示字体而无需使用上面的设置。
开发者无法控制该设置，所以必须确保：
-
font-family在元素上显式声明，且不被更高权重的全局规则（如body { font-family: sans-serif !important; }）覆盖 - 避免在伪元素上叠加其他字体继承（例如父级设置了
font-family: system-ui，子级 ::before 未重置） - 用
font-display: swap减少 FOIT，但不要用block——它会让图标空白期更长，容易被误判为加载失败
真正卡住的地方往往不是代码写错了，而是服务器没配 MIME、Nginx 没开 CORS、或者 Firefox 用户自己关了字体权限——这三者任何一个出问题，都会让图标稳稳地变成方块，且不报明显错误。
