字体显示异常主因是@font-face路径错误、格式兼容不足或加载限制；需确保路径可访问、覆盖主流格式（woff2/woff/ttf）、字体名一致，并用Network面板验证请求状态。
字体文件引入后显示异常，多数是因为 @font-face 声明路径错误、格式兼容性不足或浏览器加载限制导致的。关键要确保路径可访问、格式覆盖主流浏览器、字体名与使用处一致。
检查字体文件路径是否正确
路径是第一排查点。CSS 中的 src 属性必须指向浏览器能直接请求到的字体文件（如 woff2、woff），不能是本地绝对路径（如 C:/fonts/xxx.woff2），也不能是开发时看似正确但实际 404 的相对路径。
- 用浏览器开发者工具的「Network」标签查看字体请求是否返回 200；若显示 404 或跨域错误，说明路径或服务器配置有问题
- 推荐使用相对于 CSS 文件的路径，例如 CSS 在
/css/style.css，字体在/fonts/MyFont.woff2，则写url('../fonts/MyFont.woff2') - 避免使用中文、空格或特殊字符命名字体文件，统一用英文+下划线
确保声明了多格式并按优先级排序
不同浏览器支持的字体格式不同。只提供一种格式（比如仅 woff2）会导致旧版 Chrome、Firefox 或 Safari 无法渲染。
- 标准写法应包含
woff2（现代浏览器首选）、woff（兼容性好）、必要时补充truetype（.ttf）或svg（仅 iOS - 按兼容性从高到低排列，浏览器会自动选用第一个支持的格式：
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype');
核对 font-family 名称是否完全一致
CSS 中 @font-face 定义的 font-family 名称，必须和后续 font-family 属性中调用的名称**逐字匹配**（区分大小写、空格、引号）。
立即学习“前端免费学习笔记（深入）”；
- 声明时：
@font-face { font-family: 'MyCustomFont'; src: ...; } - 使用时：
p { font-family: 'MyCustomFont', sans-serif; }—— 注意单引号需成对，且不能写成MyCustomFont（无引号）或"mycustomfont"（大小写不一致） - 可通过开发者工具「Computed」面板查看最终生效的
font-family，确认是否命中自定义字体
留意 CORS 与本地文件协议限制
若页面通过 file:// 协议打开（双击 HTML 文件），Chrome 等浏览器会因安全策略阻止加载本地字体文件，报错 Access to font at 'xxx' from origin 'null' has been blocked。
- 解决方法：用本地服务器预览，如 VS Code 的 Live Server 插件、Python 的
python -m http.server，或部署到 Nginx/Apache - 若字体托管在其他域名，需确保服务端设置了正确的 CORS 头：
Access-Control-Allow-Origin: *或指定域名
