字体加载失败主因是@font-face声明不完整、路径错误、格式兼容性差或未设font-display；需确保路径正确、优先woff2并备选格式、必设swap/optional、font-family名称严格一致、排除样式覆盖。
字体加载不出来，大概率是 @font-face 声明写得不完整，或没处理好字体资源路径、格式兼容性、渲染策略。关键不是“加了就行”，而是“加得对、载得快、显得稳”。
检查字体文件路径和格式是否匹配
浏览器只认你实际提供的字体格式，且路径必须能被 CSS 文件正确解析（注意相对路径的基准是 CSS 文件位置，不是 HTML）：
- 确认字体文件（如
my-font.woff2）真实存在，且服务器返回200状态码（可在浏览器 Network 面板里过滤woff2查看） - 优先使用
.woff2（体积小、现代浏览器全支持），再 fallback 到.woff或.ttf；不要只写一种格式 - 路径写法示例（假设 CSS 与 fonts 文件夹同级）：
src: url('./fonts/my-font.woff2') format('woff2'),
url('./fonts/my-font.woff') format('woff');
必须声明 font-display 属性
不加 font-display，浏览器默认行为是“阻塞 + 3s 超时 + 替换”，容易白屏或闪动。推荐按场景选值：
-
font-display: swap;：最常用。立即用系统字体渲染，字体加载完立刻替换——兼顾可用性与体验 -
font-display: optional;：适合非关键字体（如装饰性标题字），网络慢时直接跳过加载 - 避免用
block（长时间空白）或fallback（限制太死），除非有强品牌一致性要求
确保 font-family 名称一致且无歧义
CSS 中调用时写的名称，必须和 @font-face 里 font-family 值**完全一致**（包括空格、大小写、引号）：
立即学习“前端免费学习笔记（深入）”；
- 声明时建议加英文引号：
font-family: 'MyCustomFont'; - 使用时也带引号：
body { font-family: 'MyCustomFont', sans-serif; } - 别用中文名或含特殊字符的 name，易出编码/解析问题
验证是否被其他样式覆盖或权重不足
即使字体加载成功，也可能因 CSS 层叠被覆盖：
- 打开开发者工具 → Elements → 检查文字元素 → 看 Computed 面板里的
font-family实际生效值 - 确认没有更高优先级的选择器（比如
!important、内联样式、更具体的选择器）强行指定了别的字体 - 如果用了 CSS-in-JS 或框架（如 Tailwind），留意它是否重置了
font-family
基本上就这些。核心就三点：路径对、格式全、font-display 明确。不复杂但容易忽略细节。
