Firefox提示Font Awesome 5字体被sanitizer拒绝图标不显示求助

解决方案 #

1. 优先排查字体文件完整性 #

该报错最常见原因是webfonts目录下的字体文件在复制/上传过程中损坏，Firefox对字体文件完整性校验远严格于Chrome。

• 操作步骤：找到你下载的原始fontawesome-free-5.14.0-web压缩包，解压后将webfonts目录下所有文件，完整覆盖替换项目public/webfonts目录下的对应文件
• 验证：清除浏览器缓存后刷新Firefox页面，检查图标是否正常显示

2. 校验服务端MIME类型配置 #

如果替换文件后问题依旧，说明是本地web服务返回的字体文件MIME类型不符合规范，Chrome对此容错性高所以可以正常渲染，Firefox会直接拒绝加载格式不符合声明的字体。
根据你使用的服务端软件修改对应配置：

Apache配置

在项目根目录的.htaccess文件，或者Apache全局httpd.conf中添加以下规则：

AddType font/woff2 .woff2
AddType font/woff .woff
AddType font/ttf .ttf

修改后重启Apache服务生效。

Nginx配置

打开Nginx的mime.types配置文件，确认以下规则存在且配置正确：

types {
    font/woff2  woff2;
    font/woff   woff;
    font/ttf    ttf;
}

修改后重启Nginx服务生效。

3. 补全@font-face的权重声明 #

你贴出的all.min.css配置中省略了@font-face的权重属性，需确认Font Awesome 5 Free对应solid字重的配置块明确添加了font-weight声明：

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* 必须明确指定和solid字体匹配的900权重 */
    font-style: normal;
    src: url("../webfonts/fa-solid-900.eot");
    /* 其余src配置保持不变 */
}

fas类默认对应的font-weight为900，Firefox要求字体声明的权重必须和调用时的权重完全匹配，否则会找不到对应字体导致加载失败。

内容的提问来源于stack exchange，提问作者Nacira