字体图标显示为方块主因是字体文件未正确加载或格式不兼容。1. 检查网络面板确认woff2、woff等文件是否404；2. 确保@font-face提供多格式支持，包括eot、woff2、woff、ttf；3. 验证CSS中路径相对正确，可试用绝对或CDN路径；4. 若跨域需配置CORS，服务器返回Access-Control-Allow-Origin: *；5. 设置正确MIME类型：woff2为font/woff2，woff为font/woff，ttf为font/ttf，eot为application/vnd.ms-fontobject；6. 核对类名与Unicode映射，可用.test::before测试content值；7. 推荐使用font-display: swap避免阻塞渲染。完整配置可解决方块问题。
字体图标显示成方块，通常是因为字体文件未能正确加载或浏览器不支持当前引入的格式。使用 @font-face 时，确保提供多种字体格式（尤其是 woff2、woff）可以显著提升兼容性和加载成功率。
检查字体文件路径与加载情况
打开浏览器开发者工具，查看“网络”选项卡中字体文件（.woff、.woff2 等）是否返回 404 或其他错误。
说明：- 确认
src中的路径是相对于 CSS 文件的正确路径 - 可尝试使用绝对路径或 CDN 路径测试是否能加载
- 检查服务器是否允许跨域加载字体（CORS 问题）
使用完整的 @font-face 引入多格式字体
不同浏览器对字体格式的支持不同，应同时提供多种格式以确保兼容性。
推荐写法：
@font-face {
font-family: 'MyIconFont';
src: url('fonts/iconfont.eot'); /* IE9 */
src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/iconfont.woff2') format('woff2'), /* 现代浏览器 */
url('fonts/iconfont.woff') format('woff'), /* 较老现代浏览器 */
url('fonts/iconfont.ttf') format('truetype'); /* Android, iOS */
font-display: swap;
}
- woff2：压缩率高，现代浏览器首选
- woff：广泛支持，作为 woff2 的降级
- eot：仅用于兼容旧版 IE
- ttf：兼容移动端和部分老系统
设置正确的 MIME 类型与 CORS 支持
服务器未配置字体文件的正确 MIME 类型会导致加载失败。
立即学习“前端免费学习笔记（深入）”；
常见 MIME 类型：
- .woff2 →
font/woff2 - .woff →
font/woff - .ttf →
font/ttf - .eot →
application/vnd.ms-fontobject
若字体部署在 CDN 或独立域名，请确保服务器响应头包含：
Access-Control-Allow-Origin: *
验证字体图标类名与 Unicode 映射
即使字体加载成功，类名错误或 content 值不匹配也会显示为方块。
- 确认使用的 class 名与字体定义一致（如 icon-home）
- 检查字体生成工具导出的 CSS 是否正确引用了 Unicode 字符
- 可手动测试：
.test::before { content: "\e601"; font-family: 'MyIconFont'; }
基本上就这些。只要路径正确、格式齐全、服务配置到位，字体图标就不会变成方块。特别是 woff2 要配合 woff 使用，避免只依赖单一格式。
