字体不显示主因是路径错误、格式支持不全或服务器配置不当，需检查src路径是否正确、提供WOFF2/WOFF/TTF/EOT多格式兼容各浏览器、确保服务器设置正确MIME类型及CORS跨域权限。
网页中使用 @font-face 引入自定义字体时，字体文件不显示是常见问题。这通常不是字体本身损坏，而是 src 配置不当或路径、格式支持不全导致的。正确配置 src 是解决字体加载失败的关键。
检查字体文件路径是否正确
浏览器无法加载字体，最常见的原因是路径错误。确保你在 src: url() 中填写的路径能被正确访问。
• 相对路径要相对于 CSS 文件位置，而非 HTML 文件
• 推荐使用相对路径如
url('../fonts/MyFont.woff2') 或绝对路径如 /assets/fonts/MyFont.woff2提供多种字体格式以兼容不同浏览器
不同浏览器支持的字体格式不同，仅提供一种格式会导致部分用户看不到字体。
推荐在 src 中按顺序列出多种格式：• WOFF2：现代浏览器首选，压缩率高• WOFF：兼容性好，广泛支持
• TTF / OTF：老旧浏览器备用
• EOT：仅 IE6-8 支持（如需兼容老IE）
示例写法：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyFont.eot'); /* IE9 兼容模式 */
src: url('fonts/MyFont.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff'),
url('fonts/MyFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
确保服务器支持字体文件 MIME 类型
有些服务器（如 Nginx、Apache）未正确配置字体文件的 MIME 类型，会导致浏览器拒绝加载。
• .woff2 → application/font-woff2
• .woff → application/font-woff
• .ttf → font/ttf
• .eot → application/vnd.ms-fontobject
以 Nginx 为例，在配置中加入：
types {
application/font-woff2 woff2;
application/font-woff woff;
font/ttf ttf;
application/vnd.ms-fontobject eot;
}
处理跨域字体加载问题（CORS）
如果字体文件部署在 CDN 或其他域名下，浏览器会因 CORS 策略阻止加载。
• 确保字体服务器返回响应头 Access-Control-Allow-Origin 正确设置• 可设为
*（公开资源）或具体域名• 例如：Access-Control-Allow-Origin: https://yourdomain.com
静态托管服务（如 S3、GitHub Pages）需手动配置 CORS 规则才能支持字体跨域加载。
基本上就这些。只要路径正确、格式齐全、服务器配置到位，字体就能正常显示。调试时优先看浏览器控制台报错和网络请求状态，能快速定位问题根源。
