css项目里字体加载不出来怎么办_正确链接@font-face并设置font-display

字体加载失败主因是@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'),<br>        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 值**完全一致**（包括空格、大小写、引号）：

OneStory

OneStory 是一款创新的ai故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319

查看详情

立即学习“前端免费学习笔记（深入）”；

• 声明时建议加英文引号：font-family: 'MyCustomFont';
• 使用时也带引号：body { font-family: 'MyCustomFont', sans-serif; }
• 别用中文名或含特殊字符的 name，易出编码/解析问题

验证是否被其他样式覆盖或权重不足

即使字体加载成功，也可能因 CSS 层叠被覆盖：

• 打开开发者工具 → Elements → 检查文字元素 → 看 Computed 面板里的 font-family 实际生效值
• 确认没有更高优先级的选择器（比如 !important、内联样式、更具体的选择器）强行指定了别的字体
• 如果用了 CSS-in-js 或框架（如 Tailwind），留意它是否重置了 font-family

基本上就这些。核心就三点：路径对、格式全、font-display 明确。不复杂但容易忽略细节。

以上就是